Question

我需要用红色框内容展开红色框，因此它们的大小始终相同。

alt text

红色框定义为：

.leftMenu{
    float:left;
    width:20%;
    background-image:url(../images/leftMenuBG.jpg);
    background-position:bottom;
    background-color:#BFDAE3;
    background-repeat:repeat-x;
}

似乎无法让它工作，无论我尝试什么！有任何想法吗？谢谢！

Answer 1

简单的解决方案：使用表格。

语义解决方案：使用faux columns。

Answer 2

你需要在蓝色div周围包裹红色div，所以在里面有蓝色div，向右浮动，然后在蓝色div之后有一个清除div。

<div style="border:solid red 2px;">
    <div style="border:solid blue 2px;float:right;width:200px;">
        <p>Content here</p>
    </div>
    <div style="clear:both;"></div>
</div>

请原谅使用内联样式，这些样式应该放在样式表中。

Answer 3

如果您需要每个div彼此独立坐着并且不介意使用JavaScript（因为这只是一个表示层），请尝试this method.

Answer 4

您也可以使用jQuery插件。（例如，http://www.cssnewbie.com/equal-height-columns-with-jquery/）

但是来自Magnar的语义解决方案：使用虚拟列。也很不错，不需要Javascript。

Answer 5

额外的“人造柱”方法是（ab）使用定位。

将两个框放在一个浮动的容器内（这使得它可以扩展以容纳浮动的子项）并相对定位（这允许我们将子元素放在其中）。

然后，绝对定位最短的列，并浮动最长的列。容器将占据浮动子项的高度，而position:absolute的div将再次占据该高度。

一个简短的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Columns</title>
<style type="text/css">
html, body {
    width: 100%;
}

#container {
    width: 100%;
    float: left;
    position: relative;
    border: 2px solid black;
}

#left-box {

    position: absolute;
    width: 40%;
    border: 2px solid red;
    background-color: #5555ee;
    height: 100%;
}

#right-box {
    float: right;
    margin-right: 15%;
    width: 40%;
    border: 2px solid blue;
    background-color: #3e3e3e;
}
</style>
</head>
<body>
<div id="container">
    <div id="left-box">
    - E - x - P - a - N - d - I - n - G -
    </div>  
    <div id="right-box">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis eros ut sem sollicitudin ultricies. Vivamus pharetra, urna sit amet auctor mollis, risus sem ultrices quam, non condimentum enim leo sit amet tellus. Pellentesque id vehicula nisl. Nulla ut commodo ligula. Sed sit amet ligula purus, at suscipit leo. Nulla quis nulla id est aliquet vehicula. Suspendisse consectetur, nunc in hendrerit dignissim, nisl massa viverra quam, et faucibus augue lorem eu mi. Vestibulum commodo luctus ante, vel placerat metus ullamcorper vel. Sed id imperdiet orci. In hac habitasse platea dictumst. Praesent ac dui orci, vitae pharetra dolor.
        </p>
        <p>
        Aenean enim metus, placerat at hendrerit in, hendrerit in velit. Cras tincidunt blandit sapien, a aliquet elit sollicitudin vitae. Quisque at ligula sem. In hac habitasse platea dictumst. Ut eu magna ipsum, id fringilla massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus consequat metus sed lectus dignissim posuere quis a felis. Mauris in consectetur arcu. Nullam fermentum adipiscing dignissim. Sed quis orci in magna viverra sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas condimentum lectus pretium tortor porta a hendrerit dui pharetra. Etiam est justo, bibendum vehicula vestibulum ac, mattis ut risus. Praesent dapibus nibh id enim vestibulum porta. Donec aliquam urna a diam varius blandit. Nulla interdum ante at arcu vehicula sagittis. Curabitur quam sapien, luctus ac sagittis vitae, tristique a odio. Nulla consequat gravida urna, at bibendum nisl ultricies ac.
        </p>

        <p>
        Vivamus quis metus porta purus aliquet aliquet. Morbi sollicitudin orci ut ligula vehicula sollicitudin. Etiam sed lacus eget leo molestie ullamcorper sit amet ac urna. Cras vitae turpis in sapien dignissim molestie. Curabitur tellus purus, dignissim at adipiscing in, faucibus ac tortor. Duis vitae metus ac urna cursus consequat eget vel quam. Integer bibendum mauris enim, sit amet blandit sapien. Nam in lectus ante. Curabitur lacinia erat sit amet lectus malesuada facilisis. Phasellus et pellentesque enim. Fusce eget tristique est. Suspendisse id dui eu lorem congue tincidunt. Cras libero lectus, placerat eget tristique a, gravida vitae lorem. Sed nec venenatis sapien. Suspendisse tempus orci ut odio venenatis et cursus sem faucibus. Mauris commodo ultricies dictum. Curabitur iaculis, ligula sit amet lobortis hendrerit, eros orci elementum nisi, cursus lacinia nunc felis vitae erat. Donec id elementum ipsum.
        </p>
        <p>
        Mauris id mi sed augue egestas vestibulum non a ipsum. Ut arcu purus, consequat in tincidunt in, pretium a dui. Cras in quam tellus, non ultricies nisi. Sed leo orci, gravida et luctus sed, eleifend quis odio. Praesent cursus feugiat neque, tincidunt malesuada libero egestas sit amet. Etiam nisi nisi, faucibus vitae accumsan sed, gravida ut lacus. Suspendisse hendrerit fringilla interdum. Cras fermentum nibh non eros gravida pretium et a sem. Sed non nisl dui, non commodo arcu. Donec nec massa mi, vel auctor odio. Curabitur sagittis velit id felis egestas iaculis. Nunc pharetra magna eu metus malesuada ut porta mi suscipit. Aenean vitae elit sit amet neque pellentesque malesuada. Aliquam eu nulla consectetur est adipiscing vulputate non a odio. Sed consectetur neque eros. Nulla fermentum vehicula vestibulum. Aenean eleifend, nisi eget porta accumsan, tellus orci tincidunt metus, volutpat lobortis quam augue commodo tellus. Aenean consectetur pretium vestibulum. Pellentesque a scelerisque sem. Cras pellentesque tortor euismod magna viverra mollis.
        </p>
        <p>
        Mauris dignissim sodales placerat. Sed id interdum erat. Nunc sagittis, nunc in auctor ullamcorper, nisi dolor commodo sem, sit amet aliquam diam dolor posuere est. Ut vestibulum elit ut urna imperdiet non tincidunt sapien euismod. Fusce ut sem erat, aliquam accumsan metus. Proin sed velit nec velit laoreet dignissim at sit amet ante. Pellentesque ac dolor non nulla dapibus lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non nisl diam. Sed et ligula sed libero porttitor semper eget eu elit. Phasellus quis massa dolor. Phasellus ac justo ac diam ultrices iaculis quis at odio. Fusce eget nisi nunc. Cras cursus, dui eget mattis rutrum, arcu dolor sollicitudin nibh, eu congue augue quam ut leo. Praesent in est nulla, eu ullamcorper enim. Nullam in adipiscing ligula.
        </p>    
    </div>
</div>
</body>

Div内部div不自动扩展（截图）

5 个答案: