web-dev-qa-db-ja.com

CSSでdivの周りにテキストを折り返す

XHTMLでdivを囲むテキストを取得しようとしています。私のXHTMLはそのように見えます...

<div id="cont-content">


<p>content</p>

<p>more content</p>

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

  </div>

そして私のCSSは次のようになります...

#content-sidebar {
    display: block;
    float: right;
    width: 270px;
    height: 400px;
    border: 1px solid red;
}

テキストがこのDivを折り返さない理由がわかりますか？

cssxhtml
27
alex

うん、わかったよ。 ＃content-sidebarは、それをラップすることになっているすべてのテキストの前になければなりません。このような：

<div id="cont-content">

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

<p>content</p>

<p>more content</p>


  </div>
36
datasn.io

  1. 画像を適切なスライスに切り取り、テキストを流したい部分を切り取ります。あなたが作るより多くのスライス、あなたのラップはよりきれいになります。

  2. これらのスライスをHTMLに挿入します。次のように、「wrap」というクラスを提供します。

    <img src="slice1.png" width="181" class="wrap">
<img src="slice2.png" width="287" class="wrap">
<img src="slice3.png" width="217" class="wrap">

  3. あなたのCSSを入れてください：

    .wrap {
    float: left; 
    clear: left; 
    margin: 0  0.9em 0 0;
}

これにより、スライスが左にフロートし、1つの画像としてまとめられ、テキストが右に流れます。マージン設定は、画像とテキストの間にマージンを作成します。

画像を右側に浮かせたい場合は、スライスの反対側を切り取って使用します。

.wrap {
    float: right; 
    clear: right; 
    margin: 0 0 0 0.9em ;
}
0
Peter van Akkeren