2

左にフローティング画像、右に div を使用してテキストとブロック要素が画像の周りを流れ、さらに div が画像の下にあるページをデザインしようとしています。次のコードでhttp://jsfiddle.net/BcjzK/3/を参照してください。

.container {
    width:700px;
    border:solid 1px gray;
}
.content {
    width:460px;
    border:solid 1px red;
    margin-right:0px;
    margin-left:auto;
}
.extra-content {
    width:230px;
    border:solid 1px green;
}
img {
    float:left;
    border:solid 1px blue;
}
blockquote {
    border:solid 1px gray;
    width:30%;
    float:right;
}

と

<div class="container">
    <img src="http://hazelden.ca/sample.png" width="320" height="auto" />
    <div class="content">
        <p> Some content, some blockquotes and images</p>
    </div>
    <div class="extra-content">
        Some more text
    </div>
</div>

大きな画像は特定の幅に設定され、その高さは「自動」に設定されます。

緑枠の div (class="extra-content") を大きな画像のすぐ下のスペースに配置できず、赤枠の div (class="content") にテキスト要素とブロック要素が残っています。適当に流す。さまざまな要素と div の並べ替えで、clear: の複数の組み合わせを試しました。

私はそれが私が見ていない単純なものであることを望んでいます。

4

1 に答える 1

0

私はあなたのフィドルでそれを動かしました：

http://jsfiddle.net/BcjzK/4/

div レイアウトの仕組みにより、左側全体をカプセル化する親コンテナーに配置しない限り、HTML コードで赤の div の後に緑の div が来ると、常に赤の div の下で緑の div が開始されます。

修正として、img と緑の div の両方を保持する別のコンテナー div を作成し、そのコンテナーを左にフロートさせました。

HTML:

<div class="container">
<div class="imgContainer">
    <img src="http://hazelden.ca/sample.png" alt="Some Image" width="320" height="auto" />
    <div class="extra-content">
        Text
    </div>
</div>
<div class="content">
...

CSS:

.container {
width:700px;
border:solid 1px gray;

}

.imgContainer{

 float: left;

}
.content {
 width:460px;
 border:solid 1px red;
 margin-right:0px;
 margin-left:auto;

}
.extra-content {
 width:230px;
 border:solid 1px green;
}
img {

 border:solid 1px blue;
}
blockquote {
 border:solid 1px gray;
 width:30%;
 float:right;
}

編集：

imgContainer ボックスを使用すると、コンテンツ テキストの位置がわずかに変更され、その存在に対応できるようになることに気付きました。コンテンツのテキストを以前とまったく同じようにレイアウトしたい場合は、これを使用します。

.imgContainer{  
 float: left;
 height: 450px;
 overflow: visible;    
}

http://jsfiddle.net/BcjzK/5/

imgContainer の height プロパティを 430px に変更することで、pic の下のコンテンツ テキストを横と同じように表示することもできます。

http://jsfiddle.net/BcjzK/6/

お役に立てれば！

于 2013-05-14T23:49:16.753 に答える