是否可以将文本环绕在圣诞树上并使文本接触边缘?
我在左侧有一个文本块,在右侧有一个文本块,我想将树放在中间,并在左侧和右侧边缘缠绕文本,这可能吗?
HTML:
<div class="main-content">
<div class="left-text">
<p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
<p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
</div>
<div class="right-text">
<p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
<p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
</div>
<div class="christmas-tree"><img src="http://www.raidersleafs.com/images/christmas-tree.png" /></div>
</div>
CSS:
.main-content {
}
.main-content .left-text {
width:25%;
float:left;
}
.main-content .left-text p.left {
}
.main-content .right-text {
width:25%;
float:right;
}
.main-content .right-text p.right {
}
.main-content .christmas-tree {
text-align: center;
}
.main-content .christmas-tree img {
width: 90%;
}
小提琴:
http://jsfiddle.net/63p19cbc/1/
更新
我能够使文本的左侧div沿着树的边缘...仍然无法获得右侧的效果:
.main-content .christmas-tree img {
width: 90%;
shape-outside: polygon(50% 0, 100% 100%, 0% 100%, 0 100%) content-box;
float: right;
}
<div class="main-content">
<div class="christmas-tree"><img src="http://www.raidersleafs.com/images/christmas-tree.png" /></div>
<div class="left-text">
<p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
<p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
</div>
<div class="right-text">
<p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
<p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
</div>
</div>
我相信这就是您在寻找^^:JSFiddle。注意我在JSFiddle中更改了html。
的HTML
<div class="main-content">
<div class="left">
<p> In a one horse open sleigh.</p>
</div>
<div class="right">
<p>Oh the weather outside is frightful</p>
</div>
<img class="christmas-tree" src="http://www.raidersleafs.com/images/christmas-tree.png" />
</div><!--main-content-->
的CSS
.main-content {
position: relative;
width: 1000px;
margin: auto;
}
/*align image to center (horizontal) and place it by absolute positioning (so the
image is always appearing on the same spot) after placing it we will create an
empty spot so the text will appear to flow around the image*/
img.christmas-tree {
position: absolute;
left: calc(50% - 215px);
width: 430px;
}
/*Just some text assigned to the right div*/
.right{
width: 50%;
float: right;
}
/*We will create empty space where the christmas tree is by adding blank content
with ::before*/
.right::before{
content: "";
height: 550px;
shape-outside: polygon(50px 0, 50px 150px, 215px 550px, 0 550px);/*this cuts out
a part of the block so the text can freely move around. The values in here
are coördinates in this blank content that allow text to float around it.*/
width: 100%;
float: left;
}
.left{
width: 50%;
float: left;
clear: left;
text-align: right;
}
/*We will create empty space where the christmas tree is by adding blank content
with ::before*/
.left::before{
content: "";
shape-outside: polygon(450px 0px, 450px 150px, 270px 550px, 500px 550px); /*this
cuts out a part of the block so the text can freely move around*/
height: 550px;
width: 100%;
float: right;
}
最后几点注意事项:
shape-outside:
。如果您知道浏览器的功能,请不要发表评论^^。本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句