Question

我有以下情况：由div和A组成的两列布局（按顺序），以页面为中心的包装div包装。我希望B水平拉伸到100% - length_of_A（A的长度根据其内容而变化），并且两个div都垂直拉伸以填充高度。如果A长于B则B将伸展，否则A将拉伸。

我尝试过宽度和高度以及位置和溢出值，但无法使其正常工作。我如何实现这样的目标？

Answer 1

遗憾的是，我没有使用div知道的跨浏览器解决方案，但您可以使用以下表格来实现：

<table style="width: 100%; border-collapse: collapse;"><tr>
    <td id="A"> <h1 style="white-space: nowrap;">...content...</h1> </td>
    <td id="B"> ...content... </td>
</tr></table>

你应该应用“white-space：nowrap;”所有那些应该统治A列宽度的元素。这应该适用于所有常见浏览器。

Answer 2

工作演示（使用JavaScript）：http://vidasp.net/tinydemos/layout-demo-2.html

但是，您无法将填充设置为表示列的DIV。

另外，出于某种原因设置精确的宽度在IE中不起作用 - 这就是为什么我不得不在右边省略1px。

Answer 3

我的页面遇到了同样的问题，但有3个div。我的解决方案是使用javascript代码来获取页面的宽度和高度 offsetHeight和offsetWidth 。

例如，使用下面的代码获取某个元素宽度的一半。

var midpoint = document.getElementById("MyElementId").offsetWidth/2;。

Answer 4

我认为这是最简单的解决方案，如果右列的内容较长，只有左栏可能在IE6中有错误。而且当左列的内容比右列长时，文本也不适合。但是你可以用背景图像修复它，这样你就不会发现文本不适合div。

<style type="text/css">
* {
    margin:0;
    padding:0
}
#page {
    background:red;
}
#left {
    width:320px;
    float:left
}
#right {
    background:blue;
    position:relative;
    overflow:hidden
}
</style>
<div id="page">
    <div id="left">
        <ul><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Consectetur adipiscing elit</li></ul>
    </div>
    <div id="right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam laoreet, turpis nec mattis rhoncus, diam arcu dignissim turpis, vel interdum libero mi vitae lorem. Mauris placerat cursus odio at imperdiet. Integer pulvinar ante quis justo mattis mattis. Maecenas interdum mollis lacinia. Cras odio erat, pellentesque eu condimentum ut, ultricies vel neque. Morbi tristique diam elit, eget sagittis est. Nullam vestibulum elit sit amet odio dictum sodales. Duis elementum mollis elementum. Nulla purus elit, suscipit auctor sagittis eget, pretium vitae est. Suspendisse potenti. Integer sit amet ipsum sem. Vestibulum quis auctor leo. Suspendisse at elementum diam.</p>
    </div>
</div>

（在Safari 5，IE6，IE7和IE8中测试过。）

有没有办法在两个方向上进行2列布局拉伸？

4 个答案: