好吧,我知道用桌子来排版是不受欢迎的,所以我试着用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:tabletable-cell,子div元素将自动填充宽度,但您需要使用包装器来保持它们的包含。因此,如果要删除#wrapper元素上的width声明,则会折叠所有内容,因为子元素不知道要填充多少空间。这里有一个CodePen demo显示代码的结果。

10-08 13:50
查看更多