1

私は次のことを達成したいと思います：

画面の中央にブロック要素 (div/img) が必要で、次のようなテキストで囲む必要があります。

ここに画像の説明を入力

この機能が M$ Word などに存在することは知っています。Web テクノロジー (HTML、CSS、JS) でもこれを行う方法はありますか?

画像をワードクラウドで囲みたいので、詳細は私のユースケースほど重要ではありません。したがって、左右のテキストが実際に行ではなく列にあるかどうかは気にしません。

4

1 に答える 1

0

これは一種の強引な解決策ですが、アイデアが得られるかもしれません。

html, body {
  height: 100%;
  text-align: justify;
}

.text:after {
  content: "Lorem ipsum drbi posuert, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesqu adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper noLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere adipiscing odio non euismod. Maecenas mi nulla, pellentesque eu semper non";
}

.left, .right {
  width: 33%;
  display: inline-block;
  height: 200px;
  overflow: hidden;
}

img {
  width: 31%;
  max-height: 200px;
}
<div class="text"></div>
<div class="text left"></div>
<img src="https://i.stack.imgur.com/bVAmG.gif">
<div class="text right"></div>
<div class="text"></div>

于 2013-10-14T21:48:35.883 に答える