Question

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

顶部和底部元素必须占据100％宽度
Top元素是单个“table-cell”
底部元素必须垂直分割成2个“table-cell”子元素，并且都适合Top元素（没有任何东西伸出，之间没有空格）

对于表格式的div来说应该很简单，但是我已经花了好几个小时试图让底部元素退出从顶部元素中最左边的单元格复制其宽度。请帮忙！

请注意，“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有一本名为＆＃34的书;关于CSS的所有内容都是错的＆＃34;它涵盖了CSS表格布局，并指出：

CSS表缺少任何行或列跨越的概念，使得使用单个布局结构比使用HTML表时可能更难。但是，使用嵌套的CSS表可以实现类似的布局。

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表中相邻单单元行的约束

1 个答案: