html - Web サイトの L 字型のテキスト ボックス

Question

Web サイトで次のテキスト ボックスのデザインを作成しようとしています。白いボックスに画像を使用することもできますが、単語が折り返されて白いボックスにうまく収まる L 字型のテキスト領域を作成する方法がわからないという問題があります。

これを達成する方法を知っている人はいますか、または調査する正しい方向を教えてくれますか?

Answer 1

CSS 除外を試してください。

CSS 除外は、インライン コンテンツが流れることができる任意の領域を定義します。CSS 除外は、任意の CSS ブロックレベル要素で定義できます。CSS 除外は、以前はフロートに限定されていたコンテンツ ラッピングの概念を拡張します。

それらは特にワードラップに関連しています。

Answer 2

これはあなたが必要とするものです

<style type="text/css"> 
#grid {
    width: 30em;
    height: 30em;
    display: grid;
    grid-columns: 25% 25% 25% 25%;
    grid-rows: 25% 25% 25% 25%;

#top-right {
    grid-column: 3;
    grid-row: 2;
}

#bottom-left {
    grid-column: 2;
    grid-row: 3;
}

.lshapify {
    wrap-flow: both;
}

#content {
    grid-row: 1;
    grid-row-span: 4;
    grid-column: 1;
    grid-column-span: 4;
}
</style> 

Answer 3

問題の正確な解決策を提供することはできませんが、この問題を解決するためにCSSshape-outside テクニックを調査して活用することはできます。残念ながら、現時点ではこれに対するサポートが限られているため、対象とするブラウザによって異なります。http://caniuse.com/で確認できる便利なツールがあります。

ケータリングが必要なテキストの量がわからない場合があるため、コンテンツをオーバーレイする際に問題が発生する場合があります。おそらく、いくつかの JavaScript がその問題を解決できるかもしれません。

以下の例は、CSS を使用してブロックを追加する方法を示していますがinset、ポリゴンを使用してその上に別のブロックを配置できると思います。

* {
  box-sizing: border-box;
}
body {
  margin: 0 auto;
  max-width: 750px;
  font-size: 10px;
}
div {
  shape-outside: inset(50px 50px 50px 0px);
  width: 200px;
  height: 200px;
  float: left;
}

<p>Sample used from CodePen at http://codepen.io/team/css-tricks/pen/b2da5018d8f20ac3a2ccc26edb724db6</p>

<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis.</p>
<p>Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint.</p>
<p>Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia.</p>
<p>Veniam inventore corrupti quisquam illum debitis vitae accusamus nobis alias cum iste error magnam, cupiditate earum! Incidunt at consequuntur, rem ipsa odio ipsum deleniti repudiandae blanditiis harum ut in, fugit officia rerum ad, corporis dolore!</p>
<p>Commodi repellendus esse quibusdam enim qui totam ipsum, consequuntur officia vel dolores, quod corrupti eveniet maiores minus explicabo, sapiente ratione doloribus laboriosam impedit nesciunt a obcaecati quam veritatis! Placeat, velit possimus delectus, atque voluptate iste alias illo, dolor odit ipsa facere quibusdam? Non omnis aliq.</p>