Question

我正在尝试将盒子放在容器中。我遇到的问题是，如果内容在其中一个容器中变得太大，则其下方的子容器不会将其自身定位在其下方，而是从顶部容器的边缘向左浮动。希望我有所作为。我发布下面的代码，这可能会给你一个更好的主意。而且我还附加了我想要实现的图像。如果问题不明确，请告诉我。

谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>containers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
#container{width:700px;margin-left:auto;margin-right:auto;overflow:hidden;background:red;}
.subContainer{width:340px;background:blue;float:left;}
.subContainer:nth-child(even){background:green;float:right;}
</style>
</head>

<body>

    <div id="container">
        <div class="subContainer">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue. 
                Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum fringilla. 
                Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet ante felis. Nunc 
                quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu placerat vitae, placerat 
                sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam erat volutpat. Vestibulum rhoncus 
                urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem. Nullam ac scelerisque neque. Donec tristique 
                tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus, blandit non hendrerit eu, vestibulum vel justo. 
                Curabitur et massa sapien.Praesent laoreet, risus eu facilisis sodales, urna lectus condimentum felis, laoreet ullamcorper 
                sapien urna in lorem. Nulla ut sem sapien, ut aliquet augue. Curabitur nec lorem risus, in interdum augue. Sed aliquam sapien
                in sapien viverra iaculis mattis eros pulvinar. In hac habitasse platea dictumst. Suspendisse viverra purus vitae nibh lacinia
                at blandit arcu auctor. Mauris sapien lacus, euismod eget malesuada condimentum, bibendum a quam. Phasellus faucibus, orci in
                ultricies mollis, orci tortor sagittis eros, non iaculis lorem orci nec quam. Donec luctus bibendum risus et gravida. Sed at
                tortor vel metus elementum euismod. 
            </p>
        </div>
        <div class="subContainer">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue. 
                Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus
                et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum 
                fringilla. Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet 
                ante felis. Nunc quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu 
                placerat vitae, placerat sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam 
                erat volutpat. Vestibulum rhoncus urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem. 
                Nullam ac scelerisque neque. Donec tristique tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus, 
                blandit non hendrerit eu, vestibulum vel justo. Curabitur et massa sapien. 
            </p>
        </div>
        <div class="subContainer">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue. 
                Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum fringilla. 
                Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet ante felis. Nunc 
                quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu placerat vitae, placerat 
                sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam erat volutpat. Vestibulum rhoncus 
                urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem. Nullam ac scelerisque neque. Donec tristique 
                tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus, blandit non hendrerit eu, vestibulum vel justo. 
                Curabitur et massa sapien.Praesent laoreet, risus eu facilisis sodales, urna lectus condimentum felis, laoreet ullamcorper 
                sapien urna in lorem. Nulla ut sem sapien, ut aliquet augue. Curabitur nec lorem risus, in interdum augue. Sed aliquam sapien
                in sapien viverra iaculis mattis eros pulvinar. In hac habitasse platea dictumst. Suspendisse viverra purus vitae nibh lacinia
                at blandit arcu auctor. Mauris sapien lacus, euismod eget malesuada condimentum, bibendum a quam. Phasellus faucibus, orci in
                ultricies mollis, orci tortor sagittis eros, non iaculis lorem orci nec quam. Donec luctus bibendum risus et gravida. Sed at
                tortor vel metus elementum euismod. 
            </p>
        </div>
    </div>

</body>
</html>

Now

desiredResult

Answer 1

这样的东西？

http://jsfiddle.net/ZS4RT/7/

如果你想拥有更多浮动元素，情况可能会有所不同。

Answer 2

由于CSS中的 float：right 属性，它向右移动。将清除属性添加到CSS，使其无法包裹在其上方的容器中。

CSS浮动问题：如何将盒子一个放在另一个下面？

2 个答案: