符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
CSS中如何模拟float实现center文字左右环绕图片
这篇文章将为大家详细讲解有关CSS中如何模拟float实现center文字左右环绕图片，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联拥有一支富有激情的企业网站制作团队，在互联网网站建设行业深耕10余年，专业且经验丰富。10余年网站优化营销经验，我们已为千余家中小企业提供了成都网站建设、网站建设解决方案，定制网站开发，设计满意，售后服务无忧。所有客户皆提供一年免费网站维护!
什么是文字左右环绕图片？就是下图的效果：
效果的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的顶部，我们不能在垂直方向上任意放置图片。
最后，再设置一些美化的样式和自适应的代码，最终的效果就实现了：
关于“CSS中如何模拟float实现center文字左右环绕图片”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
文章标题：CSS中如何模拟float实现center文字左右环绕图片
网页网址：http://bjjierui.cn/article/igsejg.html
