html - 如何并排放置多个 div？

Question

我有几个包含 float 图像和无序列表的 div。我希望将这两个并排放置在页面下方。

问题是，随着 div 沿着页面向下移动，整个页面都崩溃了。右边的图像开始越来越低，列表项越来越高。这是我所做的。

    .imageleft  {
    float: left;
    margin-left: 0;
    margin-top: 0;
}

.container-right {
display:inline;
    padding-bottom: 10px;
    width: 500px;

}

.container-left {

    float:left;
    padding-bottom: 10px;
    width: 500px;

}


    <div class="inline">
        <div class="container-left">
            <img alt="Image info" class="imageleft" src="someimage.png" />
            <h3>
                Title</h3>
            <ul>
                Sub title:
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>
        </div>
        <div class="container-right">
            <img alt="Blah blah" class="imageleft" src="/another-image.png" />
            <h3>
                Title</h3>
            <ul>
                Sub heading
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
                <li>
                    List item</li>
            </ul>
        </div>
    </div>

我尝试在 2 个 div 周围添加一个 div 但它似乎没有帮助。如何防止这种不良行为？

感谢任何提示!

Answer 1

你的意思是这样http://jsfiddle.net/efVjj/