我正在尝试在网站上创建以下文本框设计。我可以为白框使用图像,但问题是我不确定如何创建一个 L 形文本区域,其中文字可以很好地包裹并适合这些白框。
有谁知道如何实现这一目标,或者指出我正确的调查方向?
这就是你需要的
<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>
我无法为您的问题提供准确的解决方案,但您可以调查并利用 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>