Question

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

我希望有两个div并排显示。左边的div有内容，应该足够大以支持它。右边的div应占据水平空间的其余部分，并与左边的div相同。

然后第三个div应位于两个div之下并跨越整个页面。

我尝试使用表格，但右手单元格不会扩展到可用的全高/宽度。我一直在尝试使用显示设置为table，table-row，table-cell的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 Fiddle

Answer 1

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

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>

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

.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;
}

CSS显示问题：表格

1 个答案: