【问题标题】:Simple three div layout question简单的三个div布局问题
【发布时间】:2011-09-27 18:50:17
【问题描述】:

我在 DIV HTML 布局上苦苦挣扎了几天,希望能得到一些帮助,

文档中的当前点是三个DIV'S,三个div包含在“容器”div(180*400 px)中

容器中的前两个 DIV'S 分割 50% 的宽度(右侧是徽标,左侧是日期)

另外的 div(绿色)占据其余的高度(400px - 100px 的标志)

我无法将(白色)DIV 设置为占据所有剩余的 50% 宽度 我也无法告诉底部 div(绿色)占据剩余高度的 100%

这是一个插图:

http://jsfiddle.net/dwuZp/6/

感谢您的帮助(和耐心)

【问题讨论】:

    标签: html css layout


    【解决方案1】:

    不确定这是您想要的。从这个问题很难说。这是我所做的:

    1. 将显式 widths 添加到您的顶部 floated 元素。浮动需要宽度才能正确浮动。

    2. 将明确的heights 添加到您的timelogo div。

    希望接近。

    http://jsfiddle.net/jasongennaro/dwuZp/9/

    【讨论】:

    • 最后一件事,我发现如果“icons” div 是其容器的 100% 高度,那么它会以一英寸的距离进入容器 div(超过“logo” div 的高度),如何将内部“图标”div 设置为其父“logoTimeAndIcons”div 其余部分的 100% 宽度?
    • 不知道你在这里问什么,@user648026。你能给我更多的信息吗?
    • 谢谢 Jason,我为此问题发布了新问题。
    【解决方案2】:

    绿色的 div 占据了剩余容器高度的 100%,只是 它的 容器 div #logoTimeAndIcons 不是 的全高>它的容器 div,#container

    另外,logo 图片是 100px,比容器的 180px 宽度的 50% 多出 10px...

    【讨论】:

      猜你喜欢
      • 2012-09-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多