L形在网站上的文本框

Question

我正在尝试在网站上创建以下文本框设计。我可以使用图像作为白色方框，但问题是我不知道如何创建一个L形文本区域，其中的文字包裹并很好地适应这些白色框。

有谁知道如何实现这一目标，还是指出了正确的调查方向？

Answer 1

尝试 CSS Exclusions。

  

CSS排除定义内联内容的任意区域   可以流动。可以在任何CSS上定义CSS排除   块级元素。 CSS Exclusions扩展了内容的概念   包裹以前仅限于花车。

它们与自动换行有关。

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

我无法为您提供问题的确切解决方案，但您可以调查并利用CSS shape-outside techniques来解决此问题。不幸的是，目前对此的支持有限，因此它取决于您希望定位的浏览器。有一个很好的工具可以在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>