Question

我的一个网站页面当前搞砸了。我很难为我的工作人员提供可爱的不合适的传记。这是网页：

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

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

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

请你帮我修好div，这样图片都在一个漂亮的小栏目中，文字就在图片的旁边，告诉用户所有关于那个特定船员的信息？我不希望元素像你在上面的sampsonvision.com页面中看到的那样遍布整个地方。

Answer 1

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

<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;
}

使用浮点数定位内容时遇到的问题非常普遍。基本上所有元素都浮动，没有一个被认为有高度，所以容器本身的高度为0。

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

其他div上面的一堆div包含div里面的div？

1 个答案: