DIVs安排 - HTML CSS

Question

如何在不使用js的情况下构建上述排列？

提前致谢！

#div3 {
    display: inline-block;
}
#div1 {
    min-width: 150px;
    float: left;
}

#div2 {
    max-width: 100%;
    float: left;
}

http://jsfiddle.net/XCDsu/4/ - 我如何才能将第二个div放入内容？第一个必须是150px而不是百分比

Answer 1

其他答案中的所有这些技巧都有一个共同的问题。 他们假设第一列的width为150px，但实际上您需要min-width为150px。那么当第一列需要增长时会发生什么？

看看我的解决方案。纯CSS，不使用calc（所以它也支持IE8等旧版浏览器）

Working Fiddle

HTML：此处没有任何新内容..

<div id="Container">
    <div id="Column1">content</div>
    <div id="Column2">content of second div is very  very large</div>
</div>

<强> CSS：

#Container
{
    width: 80%; /*Change to WTE you want*/
    display: table;
    border: 1px solid black;
    margin: 0 auto;
}
#Container > div
{
    display: table-cell;
}
#Column1
{
    background-color: red;
    min-width: 150px; /*From your CSS*/
}

#Column2
{
    background-color: green;
}

Answer 2

如果width的{​​{1}}固定为#div1且150px是动态的，那么您可以使用：

#div3

如果#div2 { width : calc(100% - 150px); } 也是动态的，那么你需要使用JS。

Answer 3

你可以使用圣杯技术： http://alistapart.com/article/holygrail

#div3 {
    display: block;
    background: blue;
    padding-left: 150px;
}

#div1 {
    width: 150px;
    float: left;
    margin-left: -150px;
}

#div2 {
    width: 100%;
    float: left;
}

这样做是在＃div3的左边创建一个150px宽的填充，但是它会将#div1拉入负边距。

这样＃div2使用的“100％”实际上是（100％ - 150px）＃div3