html - CSS 表中相邻单单元格行约束的多单元格列宽

Question

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

1. 顶部和底部元素必须占据 100% 的宽度
2. 顶部元素是单个“表格单元格”
3. 底部元素必须垂直拆分为 2 个“table-cell”子元素，并且都位于顶部元素下方(没有任何突出部分，中间没有空格)

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

这是我的 jsfiddle

请注意，“STUFF”单元格将下一行的第二列向右推。这可以防止东西“适合”在顶行下方。

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 表格不同，CSS 表格没有列或行跨度。为了使顶行跨越底行中 2 个单元格的距离，底部单元格嵌套在一个额外的 CSS 表格中。

这是一个简化的 JSFiddle 示例:http://jsfiddle.net/TalkingRock/pewywx4y/请注意顶行现在如何填满表格的整个宽度。

Sitepoint 有一本名为“你所知道的关于 CSS 的一切都是错误的”的书，其中涵盖了 CSS 表格布局，它指出:

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