0

代码笔： http ://codepen.io/leongaban/pen/solzy

我一定是脑死了，不知道为什么第二个 div 中的元素没有正确浮动。图像应该在第二个copy_blockdiv 的右侧并复制到左侧。

在此处输入图像描述

HTML 

    <div class="copy_block">
        <div class="float_left">
            <img src="http://placehold.it/350x150" alt="How does Who@ help?"/>
        </div>
        <div class="float_right">
            <h2>Header Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat iaculis odio ut tincidunt. Suspendisse placerat gravida nisi sit amet imperdiet. Duis eget est elit. Cras vitae dignissim lectus, nec pulvinar tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque at eros at est blandit mollis ac vulputate eros. Nunc mauris libero, tempor nec aliquam id, tincidunt eget nibh. Maecenas pulvinar sem ac turpis porttitor, nec scelerisque odio egestas. Vestibulum lacus ligula, semper id quam viverra, ultricies congue dui. Curabitur at rhoncus nibh. Aenean luctus justo ac massa ultricies, sit amet pulvinar ipsum fringilla.</p>
        </div>
    </div>

    <div class="copy_block">
        <div class="float_left">
            <h2>Header Title 2</h2>
            <p>Curabitur arcu neque, tempus eget dolor vel, hendrerit ornare lectus. Donec commodo ante sit amet erat fringilla commodo a in mauris. Aliquam erat volutpat. Donec orci odio, pulvinar eu luctus ut, cursus ultrices massa. Maecenas tempor tincidunt hendrerit. Vivamus faucibus scelerisque urna, rutrum hendrerit nisl adipiscing a. Proin ante nisl, vulputate malesuada pharetra id, scelerisque sed ligula.</p>
        </div>
        <div class="float_right">
            <img src="http://placehold.it/350x150 " alt="Why is Who@ different?"/>
        </div>
    <div>

<div>

CSS

#about-container {
    margin: 0 auto;
    width: 80%;
    max-width: 1200px;
    height: 100%;
    font-family: Arial;
    font-size: 1em;
    color: #686662;
}

.copy_block {
  display: block;
  margin: 0 auto;
  padding: 10px;
  width: 80%;
  height: 100%;
  background: cyan;
}

.float_left {
   float: left;
}
.float_right {

}
4

5 回答 5

2

尝试为浮动元素添加特定宽度。由于您没有<img />直接浮动元素，因此<div />您浮动的元素将从其子元素（即<p />标签）本质上获取其宽度。

这是更新的 Codepen 链接：http ://codepen.io/anon/pen/Bxcha

于 2013-10-11T20:50:09.010 回答
1

它对我有用，有一个清晰的 div。

写在你的第一张照片之后

        <div class="copy_block">
            <div class="float_left">
                <img src="http://placehold.it/350x150" alt="How does Who@ help?"/>
            </div>
     <div style="clear:left"></div>
于 2013-10-11T20:52:13.033 回答
1

浮动元素不会“向上浮动”——如果您希望图像在右侧并且文本内容在其周围浮动，那么您必须将它放在代码中的文本内容之前……当然要实际给出它float:left，这你没有做。

您的 codepen，已修复：http ://codepen.io/anon/pen/LjvIx

（也float_right从第一个文本容器和float_left第二个文本容器中删除了类，因为这些也没有意义，如果浮动也会产生完全不同的效果。）

于 2013-10-11T20:53:10.010 回答
1

CBroe 是正确的 - 在 HTML 中放置标签是关键。我冒昧地稍微清理了您的 HTML 并将其推送到此JSFiddle中。请注意，我不浮动文本 - 只有需要浮动：

img.right {
    margin: 5px 0px 5px 5px;
    float:right
}

img.left {
    margin: 5px 5px 5px 0px;
    float:left
}
于 2013-10-11T20:57:21.017 回答
1

添加overflow:auto;到您的 outterdiv中，您无需担心清除浮动。在这种情况下，.copy_block。

小提琴

编辑：* { overflow: auto; }不过，您始终可以确保不需要清除任何浮动。

于 2013-10-11T22:11:56.530 回答