Question

我正在尝试在HTML5 + CSS3中创建一个简单的1page响应式网站，它将在一个大的可滚动页面上相互之间有几个部分，如下所示：

Section 1
[content]

Section 2
[content]

Section 3
[content]

出于某种原因，在修复“about”部分的css时，似乎已经“卡住”它下面的“连接”部分（请参阅此jsfiddle）。它在宽屏幕上正确显示，但在狭窄的屏幕上（如jsfiddle中可能显示的那样），“Connect”类将放置在“About”部分的图像下方，即右侧。

当我检查关于类和连接类的元素时，它们看起来也很奇怪。他们两个似乎都失去了内容，而“连接”类认为它的内容高于它而不是低于它？

我不知道我打破了什么，但似乎我错过了一些明显的东西。任何帮助将不胜感激！

HTML

<div class="about">
    <header>
        <h2 id="about">About</h2>
        <hr>
    </header>

    <div class="aboutContainer">
        <div class="aboutText">
            <p>Text text text</p>
        </div>

        <div class="aboutImg">
            <img src="img/about_photo.jpg" />
        </div>
    </div>
</div>

<div class="connect">
    <header>
        <h2 id="connect">Connect</h2>
        <hr>
    </header>

    <div class="links">
        <ul>
            <li><a href="#"><img src="img/logo1.png" /></a></li>
            <li><a href="#"><img src="img/logo2.png" /></a></li>
            <li><a href="#"><img src="img/logo3.png" /></a></li>
        </ul>                       
    </div>
</div>

CSS

.aboutContainer {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.aboutText {
    display: inline;
    width: 60%;
    height: auto;
    margin: 0;
    float: left;
}

.aboutImg {
    display: inline;
    display: block;
    width: 30%;
    float: right;
    margin: 0;
}

.aboutImg img {
    min-width: 240px;
}

.connect {
    width: 100%;
    display: inline;
    vertical-align:bottom;
}

.links {
    float: left;
    width: 35%;
}

.connect ul {
    width: 100%;
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

.connect li {
    display: inline;
}

.connect img {
    display: inline;
    width: 32%;
}

Answer 1

在connect div。

之前添加以下内容

<div class='clearfix'></div>

跟随css：

.clearfix {
  clear: both;
}

听到的是jsfiddle

课程＆＃39;坚持＆＃39;一起

1 个答案: