html - 在其他 div 之上的一堆 div 包含其中的 div？

Question

我的一个网站页面当前乱七八糟。我很难为我那群可爱的不合群的人写传记。这是网页:

http://www.sampsonvision.com/about/

此网页的代码可以在此处此 zip 文件夹内的网站文件中的 about 文件夹中找到:

https://drive.google.com/file/d/0B3ZPyNRv7C3hemJERHZYVWFtSDg/edit?usp=sharing

能否请您帮我修复 div，使图片都在一个漂亮的小列中，文本直接在图像旁边，告诉用户有关该特定船员的所有信息？我不希望元素到处都是，就像您在上面的 sampsonvision.com 页面中看到的那样。

Answer 1

在每个部分的末尾添加一个空的 div，类为“clear”。

<div class="jordansbio">
    <div class="jordanpic">
        <img src="images/jordanwhite.jpg" width="150" height="170">
    </div>
    <div class="jordaninfo">
        <span class="jwhit">
            <h2 align="center">Jordan White</h2>
            <p>Testing, Testing, 1, 2, 3</p>
        </span>
    </div>
    <div class="clear"></div>
</div>

然后添加如下CSS样式

.clear {
    clear: both;
}

您面临的是使用 float 定位内容时遇到的一个非常常见的问题。基本上，所有元素都 float 时，它们都不被认为具有高度，因此容器本身的高度为 0。

http://www.quirksmode.org/css/clearing.html