好吧,我知道用桌子来排版是不受欢迎的,所以我试着用div等,结果把自己完全纠结在结里,没能达到我所需要的排版——于是又回到桌子上。
布局实际上相对简单,但似乎有一些特性使得CSS有点棘手(至少对我来说)。
只有两排。最上面一行有两个等宽的单元格。它们包含文本,并应自动调整到正确的高度。
另一行包含iframe。它应该是容器的全宽,并占据剩余的容器高度。
我尝试了一些方法,包括使用类似CSS的display:table cell等,但因为我的第二行需要colspan=“2”,这根本不起作用。使用浮动div似乎也不是很好,因为我如何得到我的第二排-我不想诉诸绝对定位,因为那样我就必须假设第一排的固定高度。
有没有CSS专家能帮我找到正确的方向?
下面是一个示例,演示了我目前使用表(下面是jsfiddle链接)所做的工作。
HTML。。。
<div id="cont">
<table>
<tr height="1%">
<td><p>How would you do this with DIVs / CSS?<br />
Some text. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod
</p></td>
<td><p>Some more text.<br />
These two cells have indeterminate size.<br />
They should only take up the minimum height.
</p></td>
</tr>
<tr>
<td colspan="2">
<div id="iframe">
An iframe will go here.<br />
I'm just using a div for
illustrative purposes.
</div>
</td>
</tr>
</table>
</div>
CSS
#cont {
position: absolute;
left: 4px;
right: 4px;
top: 4px;
bottom: 4px;
}
table {
width: 100%;
height: 100%;
}
td {
vertical-align: top;
}
#iframe {
width: 100%;
height: 100%;
border: 1px solid green;
}
http://jsfiddle.net/z8qum850/
最佳答案
使用CSS很容易做到这一点。下面的内容将给出您所询问的内容:
HTML格式
<div id="wrapper">
<div id="row1">
<div id="first-cell"></div>
<div id="second-cell"></div>
</div>
<div id="row2"></div>
</div>
CSS
div {
border:1px solid black;
}
#wrapper {
height:auto;
width:100%;
}
#row1 {
display:table;
width:100%;
}
#first-cell,#second-cell {
display:table-cell;
height:200px;
}
#row2 {
width:100%;
height:200px;
display:block;
}
使用
display:table
和table-cell
,子div
元素将自动填充宽度,但您需要使用包装器来保持它们的包含。因此,如果要删除#wrapper
元素上的width声明,则会折叠所有内容,因为子元素不知道要填充多少空间。这里有一个CodePen demo显示代码的结果。