CSS 模拟float实现center文字左右环绕图片的效果

时间:2021-05-08

什么是文字左右环绕图片?就是下图的效果:

效果的CSS代码可以点击这里 查看

在CSS中,并没有float: center这种设置,但是我们可以通过一些小技巧来模拟出类似的效果。

经常会有小伙伴问:有float: left和right,为什么没有float: center?我的答案是:

1.text-align: center已经可以实现内联元素的居中效果

2.在一行中使文字环绕显示在图片的两侧,这种效果浏览器处理起来是非常困难的。除非将文字显示为两列,但这是另一个问题

3.当涉及到文本时,float实际上应该被称为环绕,float:left的意思是“将这个元素放置在容器的左侧,并将其右侧的所有内容都环绕其显示”,在这种情况下,我们讨论的float:center实际上是两侧环绕,这会带来一系列的问题,比如如何确定元素在容器中的“深度”?

为了模拟实现float: center的效果,我们通过创建两个div将文字划分为两列,其中居中的图片写在第一个div中:

<div id="container"> <div id="leftcol"> <p><img src=".../01.jpg">京都位于本州岛的中心附近,在王位移到江户... </div> <div id="rightcol"> <p>因此,京都许多保存下来的地方都是联合国教科文组织世界遗产,包括... </div></div>

首先,我们设置两个div即.leftcol和.rightcol元素为display: table-cell,同时将容器.container元素设置为display: table:

div#container { display: table; width: 80%; max-width: 900px; margin: 0 auto; line-height: 1.5;}div#leftcol, div#rightcol { display: table-cell; padding: 1em;}div#container img { width: 55%; height: auto;}

这样,文字就显示成为表格的两列了:

图片会按照其该有的样式显示在第一列的顶部左侧,并且底部与文字的第一行的基线对齐。

接下来,如果给图片设置一个float:right,它就会在第一个div中右侧浮动,并且文字会环绕在图片的左侧显示:

到这里,我们实现了一个最传统的布局:两列文字,其中一列包含一张浮动的图片。

下面,就要使用一些技巧来实现左右环绕的文字效果了。

第一步,通过设置margin-right属性负值,将图片右移一定的距离:

div#container img { float: right; width: 55%; height: auto; margin-right: -20%; margin-left: 20px; margin-bottom: 20px;}

margin-left和margin-bottom属性设置图片与左侧和下方的文字都间距20px。

这个时候图片会和第二列的文字显示重合了:

第二步,通过:before伪元素在第二个div中生成一个元素,它不包含任何内容,仅仅是为了浮动后让文字环绕它。

div#rightcol:before { content: " "; float: left; width: 25%; padding-top: 102%;}

这个伪元素被设置为左浮动,并且它的宽度与图片右移的距离加起来刚好是图片的宽度。

padding-top属性设置的稍微大一点,这样文字与图片能够空出一些距离。

如果给这个没有任何内容的伪元素添加一个红色的边框,我们就可以看到它的位置:

这个空伪元素的实际作用就是将与图片重合的文字隔开,并使它们环绕,这样就模拟出了右侧文字环绕图片的效果,而实际上文字环绕的是伪元素。

这种环绕方式有一个限制,就是图片必须位于div的顶部,我们不能在垂直方向上任意放置图片。

最后,再设置一些美化的样式和自适应的代码,最终的效果就实现了:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章