-1

我已经决定我不知道我在用我的 CSS 做什么。

我想让两个 div 并排显示。左边的 div 有内容，应该足够大来支持它。右 div 应该占据其余的水平空间并且与左 div 具有相同的高度。

然后第三个 div 应该在这两个下方并跨越整个页面。

我尝试使用表格，但右侧单元格不会扩展到可用的完整高度/宽度。我一直在尝试使用将显示设置为表格、表格行、表格单元格的 div。

由于某种原因，左 div 不断水平扩展，而我的右 div 没有任何空间。我尝试指定左侧 div 的宽度，但它被忽略了。

右边的 div 有 javascript 创建的动态内容，所以在渲染时它是空的。

#main {
    display : table;
    width : 100%;
}

.row {
   display : table-row;
   width : 100%;
}

#row2 {
   display : table-row;
   background-color:purple;
}

#right {
    display : table-cell;
    overflow: hidden;
    height: 100%;
    background-color:blue;
}

#left {
    display : table-cell;
    background-color:red;
    width: 100px;
}

<body>
    <div id="main">
        <div class="row">
            <div id="left">
                 Some content
            </div>
            <div id="right"></div>
        </div>
        <div id="row2">
            Some stuff
        </div>
   </div>
</body>

Js小提琴

4

1 回答 1

2

您的“右”列没有占用任何空间，因为它没有内容。给它一些东西，它会的。

http://jsfiddle.net/6LFsL/4/

<div id="main">
    <div class="row">
        <div id="left">
             Some content
        </div>
        <div id="right">&nbsp;</div>
    </div>
    <div id="row2">
        Some stuff
    </div>
</div>

此外，使用表格显示属性并不意味着您需要有表格、表格行和表格单元格元素。对于这种情况，表格和表格单元就足够了：

.row {
    display : table;
    width : 100%;
}

#row2 {
   background-color:purple;
}

#right {
    display : table-cell;
    overflow: hidden;
    height: 100%;
    background-color:blue;
}

#left {
    display : table-cell;
    background-color:red;
    width: 100px;
}
于 2013-10-01T19:14:29.960 回答