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

ShevaKuilin 发布于2019-08-02 16:15 / 554人阅读

摘要：什么是文字左右环绕图片就是下图的效果效果的代码可以点击这里查看在中，并没有这种设置，但是我们可以通过一些小技巧来模拟出类似的效果。下面，就要使用一些技巧来实现左右环绕的文字效果了。

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

效果的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即.leftcol和.rightcol元素为display: table-cell，同时将容器.container元素设置为display: table：

div#container { 
  display: table; 
  width: 80%;
  max-width: 900px;  /* 容器最大宽度900px */
  margin: 0 auto;
  line-height: 1.5;
}
div#leftcol, div#rightcol { 
  display: table-cell; 
  padding: 1em;
}
div#container img {
  width: 55%;  /* 图片的宽度是第一列div宽度的55% */
  height: auto;
}

这样，文字就显示成为表格的两列了：

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

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

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

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

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

div#container img {
  float: right;
  width: 55%;
  height: auto;
  margin-right: -20%;  /* 图片向右移动第一个div宽度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的顶部，我们不能在垂直方向上任意放置图片。

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

GPU云服务器云服务器文字环绕图片 js实现图片渐入效果文字左右滚动文字自动左右滚动js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54973.html

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

摘要：什么是文字左右环绕图片就是下图的效果效果的代码可以点击这里查看在中，并没有这种设置，但是我们可以通过一些小技巧来模拟出类似的效果。下面，就要使用一些技巧来实现左右环绕的文字效果了。什么是文字左右环绕图片？就是下图的效果：showImg(https://segmentfault.com/img/bVbr3Wt?w=627&h=461); 效果的CSS代码可以点击这里查看在CSS中，并...

you_De 2019-08-29 18:45 评论0 收藏0
重塑你的CSS世界观——浮动魔鬼float

摘要：而在文档流中，如果浮动元素和跟随元素都是元素，它们两在默认情况下都将占据一行。而由于浮动元素脱离了文档流，如果父元素没有指定高度或者其他元素撑起，也就出现了所谓的浮动元素的父元素高度塌陷。为什么要写《重塑你的CSS世界观》系列文章由于从工作到现在，我的主要工作都是写JavaScript，几乎没怎么碰CSS，通常都是别人写好界面，然后我来开发JavaScript逻辑代码，这导致了严重...

joyqi 2019-08-30 15:55 评论0 收藏0
重塑你的CSS世界观——浮动魔鬼float

摘要：而在文档流中，如果浮动元素和跟随元素都是元素，它们两在默认情况下都将占据一行。而由于浮动元素脱离了文档流，如果父元素没有指定高度或者其他元素撑起，也就出现了所谓的浮动元素的父元素高度塌陷。为什么要写《重塑你的CSS世界观》系列文章由于从工作到现在，我的主要工作都是写JavaScript，几乎没怎么碰CSS，通常都是别人写好界面，然后我来开发JavaScript逻辑代码，这导致了严重...

frank_fun 2019-08-02 14:24 评论0 收藏0
CSS基础入门之float

摘要：在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。破坏文档流这是最本质的特性，因此设计的初衷就是破坏文档流。但是也有一种情况是，浮动元素前后并没有内联元素，因此也就不存在行框盒子，这时候就是浮动锚点在起作用。前几天有小伙伴说对float的学习云里雾里的，下面我就给大家说一下关于float的一些问题。在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到...

xinhaip 2019-08-30 10:59 评论0 收藏0