0

コードペン: http://codepen.io/leongaban/pen/solzy

2 番目の div の要素が正しく浮かんでいない理由がわかりません。copy_block画像は右側に配置し、2 番目のdivの左側にコピーする必要があります。

ここに画像の説明を入力

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

浮動要素は「浮き上がり」ません。画像を右側に配置し、テキスト コンテンツをその周りに浮かせたい場合は、コード内のテキスト コンテンツの前に配置する必要があります。もちろん、実際にはそれをfloat:left指定します。あなたはしませんでした。

コードペン、固定: http://codepen.io/anon/pen/LjvIx

float_right(また、最初のテキスト コンテナーと 2 番目のテキスト コンテナーからもクラスを削除しましfloat_leftた。これらも意味をなさず、フロートした場合もまったく異なる効果になるためです。)

于 2013-10-11T20:53:10.010 に答える
1

overflow:auto;outterに追加すれdivば、フロートのクリアについて心配する必要はありません。この場合、.copy_block.

フィドル

* { overflow: auto; }編集：ただし、フロートをクリアする必要がないことを確認するためにいつでも行うことができます。

于 2013-10-11T22:11:56.530 に答える
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 に答える