html - 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 等较旧的浏览器中也支持）

工作小提琴

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

如果widthof#div1固定在150px并且#div3是动态的，那么您可以使用：

#div2 {
    width : calc(100% - 150px);
}

而如果#div1也是动态的，那么你需要使用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 的左侧创建一个 150 像素宽的填充，但它会将 #div1 拉入其中，并带有负边距。

这样#div2 使用的“100%”实际上是#div3 的 (100% - 150px)