Question

我已经阅读了几篇关于花车的帖子，但我猜我的天真并没有抓住我如何使用这些解决方案来帮助我。也许我的方法不正确。希望有人可以提供帮助。

我使用float:left创建了三个圈子。我遇到的问题是应该在三个圆圈下面的线浮动到圆圈的右边。当您在http://jsfiddle.net/u7Za3/上移动垂直分隔线时，您会注意到“关于我们”的移动。我需要“关于我们”才能留在圈子之下。

我想知道我是否需要在某个地方使用clear，但我不确定我需要在哪里使用它。

CSS

.mission-vision-circles {
    width: 220px;
    height: 220px;
    -webkit-border-radius: 110px 110px 110px 110px;
    -moz-border-radius: 110px 110px 110px 110px;
      border-radius: 110px 110px 110px 110px;
    -webkit-box-shadow: 2px 2px 2px 2px #ddd;
    box-shadow: 2px 2px 2px 2px #ddd;
    margin: 20px 5px 20px 5px;
    padding-top: 10px;
    font-size: 13px;
    float: left;
    text-align: center;
}

.brightorange {
    border: 0px solid #E05900;
    background: #e05900;
}

.gray {
    border: 0px solid #796e67;
    background: #796e67;
}

.dark {
    border: 0px solid #333;
    background: #333;
}

.mvv-circles-text {
    color: #fff;
    width: 83%;
    margin: 10% auto 0 auto;
}

.mvv-circles-header {
    color: #fff;
}

@media screen and (max-width: 1024px) {
.mission-vision-circles {
   width: 183px;
    height: 185px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;}

}

@media screen and (max-width: 1024px) {
.mvv-circles-text {
    color: #fff;
    width: 80%;
    padding: 5px 5px 5px 5px;
    margin: 10% auto 0 auto;}
}

@media screen and (max-width: 950px) {
.mission-vision-circles {width: 200px;
  height: 200px;
  -webkit-border-radius: 100px 100px 100px 100px;
    -moz-border-radius: 100px 100px 100px 100px;
      border-radius: 100px 100px 100px 100px;}

}


@media screen and (max-width: 650px) {
.mission-vision-circles {width: 160px;
height: 160px;
-webkit-border-radius: 80px 80px 80px 80px;
    -moz-border-radius: 80px 80px 80px 80px;
    border-radius: 80px 80px 80px 80px;}


}

@media screen and (max-width: 480px) {
.mission-vision-circles {width: 180px;
    height: 180px;
    -webkit-border-radius: 90px 90px 90px 90px;
    -moz-border-radius: 90px 90px 90px 90px;
    border-radius: 90px 90px 90px 90px;}

}

HTML

<div class="mission-vision-circles gray">
<h4 class="mvv-circles-header">VALUES</h4>
<span class="mvv-circles-text">Personal growth</span>
<p class="mvv-circles-text">Leading by example</p>
<p class="mvv-circles-text">Helping Others</p>

</div>
<div class="mission-vision-circles brightorange">
<h4 class="mvv-circles-header">MISSION</h4>
<p class="mvv-circles-text">To share stories and experiences about reframing limiting mindsets in order to help you get out of your own way.</p>

</div>
<div class="mission-vision-circles dark">
<h4 class="mvv-circles-header">VISION</h4>
<p class="mvv-circles-text">To see us all living our lives stretched beyond the limitations imposed by our minds.</p>

</div>

<h2>About Me</h2>

由于

帕姆

Answer 1

如果您要悬浮div并希望h2保持在下面，请将h2添加到h2 { clear:both; }：

{{1}}

演示 http://jsfiddle.net/u7Za3/2/

Answer 2

这些都是很好的解决方案，但我总是提倡以某种方式包装浮动元素。看看包装div如何完全跨越它的孩子的高度，显示背景颜色。

http://jsfiddle.net/3LCMs/

我喜欢使用类似的东西：

/* wrap floats */
.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

Answer 3

如果添加样式以使H2标记清除浮动，它应该可以正常工作。

h2 {
    clear: left;
}

你也可以指定clear：both。

我是否需要使用float：clear以将内容显示在我想要显示的位置？

3 个答案: