多单元格列宽受 CSS Table 中相邻单单元格行的限制

Question

我正在尝试使用 css 和符合以下条件的 div 创建网站布局：

顶部和底部元素必须占据 100% 宽度
顶部元素是单个 "table-cell"
底部元素必须垂直拆分为 2 个 "table-cell" 子元素，并且都位于顶部元素下方（没有突出的部分，中间没有 space）

使用 table 样式的 div 应该很简单，但我已经摆弄了几个小时试图让底部元素停止从顶部元素中最左边的单元格复制其宽度。请帮忙！

这是我的jsfiddle

请注意，"STUFF" 单元格将下一行的第二列向右推。这可以防止 "fitting" 位于顶行下方。

HTML:

    <div id="dvStructure_Outer">
    <div id="dvStructure_Upper">
        <div id="dvUperrCell">
            STUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFF<br />
        </div>
    </div>
    <div id="dvStructure_Lower">
        <div id="dvDetailStructure_Left">
            Lower Left<br />
        </div>
        <div id="dvDetailStructure_Right">
            <div class="dvDetailSection">
                Lower Right Right Detail 1<br />
            </div>
            <div class="dvDetailSection">
                Lower Right Right Detail 2<br />
            </div>
            <div class="dvDetailSection">
                Lower Right Right Detail 3<br />
            </div>
        </div>
    </div>
</div>

风格

#dvStructure_Outer {
    display:table;
    min-width:500px;
    border-color:red;
    border:solid; 
}
#dvStructure_Upper {
    display:table-row;
    border:dashed;
}
#dvStructure_Lower {
    display:table-row;
    border:dashed;
}
#dvUperrCell {
    vertical-align:center;
    display:table-cell;
    border:dashed;
}
#dvDetailStructure_Left {
    display:table-cell;
    border:dashed;
}
#dvDetailStructure_Right {
    display:table-cell;
    width:400px;
    border:dashed;
}
.dvDetailSection {
    display:table-row;
    border:dotted;
}

Answer 1

与 HTML tables 不同，CSS tables 没有列或行跨度。为了使顶行跨越底行中 2 个单元格的距离，底部单元格嵌套在额外的 CSS table 中。

这是一个简化的 JSFiddle 示例：http://jsfiddle.net/TalkingRock/pewywx4y/ 注意顶行现在如何填充 table.

的整个宽度

Sitepoint 有一本名为 "Everything You Know About CSS is Wrong" 的书，涵盖了 CSS table 布局，它指出：

CSS tables lack any concept of row or column spanning, making it trickier to use one single layout structure than what might have been possible when using HTML tables. However, similar layouts can be achieved by using nested CSS tables.

HTML

<div class="table short-width">

<div class="table-row">
<div class="table-cell green"><p>Top Row</p></div>    
</div>

<div class="table-row">
<div class="table-cell">    
<div class="table full-width">
<div class="table-row">    
<div class="table-cell peach"><p>Bottom Row Left</p></div>
<div class="table-cell purple"><p>Bottom Row Right</p></div>      
</div>
</div>    
</div> 
</div> 

</div>

CSS

.table {display:table;}
.table-row {display:table-row;}
.table-cell {display:table-cell;}
.short-width {min-width:500px;}
.full-width {width:100%;}
.green {background-color:#ccffcc;}
.peach {background-color:#ffcccc;}
.purple {background-color:#ccccff;}
p {margin:0; padding:.5em;}

多单元格列宽受 CSS Table 中相邻单单元格行的限制

Multi-Cell Column Width constrained by adjacent Single-Cell Row in CSS Table

html

css

css-tables