html - HTML/CSS を使用して画像をテキストで囲む方法

Question

次の図のようなテキスト ブロックをデザインしたいと考えています。

これが可能かどうか質問しますか?

Answer 1

float次のようにイメージ コンテナーを作成する必要があります。

HTML

<div id="container">
    <div id="floated">...some other random text</div>
    ...
    some random text
    ...
</div>

CSS

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

フィドル

http://jsfiddle.net/kYDgL/

Answer 2

CSS Shapesを使用すると、長方形の画像の周りにテキストを浮かせるだけでなく、さらに一歩先を行くことができます。

実際にテキストをラップして、イメージまたはポリゴンのエッジの形状になるようにテキストをラップすることができます。

DEMO FIDDLE (現在 webkit に取り組んでいます - caniuse )

.oval {
  width: 400px;
  height: 250px;
  color: #111;
  border-radius: 50%;
  text-align: center;
  font-size: 90px;
  float: left;
  shape-outside: ellipse();
  padding: 10px;
  background-color: MediumPurple;
  background-clip: content-box;
}
span {
  padding-top: 70px;
  display: inline-block;
}

<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

また、CSS Shapes に関する優れたリスト アーティクルもここにあります。

Answer 3

BeNdErRの回答への追加
: 「その他の TEXT」要素にはfloat:none、次のようなものを含める必要があります。

    <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
    </div>

Answer 4

画像サイズが可変であるか、レスポンシブデザインの場合は、テキストを折り返すだけでなく、段落の最小幅を設定して、段落が狭くなりすぎないようにすることができます。
目的の最小段落幅を持つ非表示の CSS 疑似要素を指定します。この疑似要素に収まる十分なスペースがない場合は、画像の下に押し下げられ、段落も一緒に取り込まれます。

#container:before {
  content: ' ';
  display: table;
  width: 10em;    /* Min width required */
}
#floated{
    float: left;
    width: 150px;
    background: red;
}