圆月山庄资源网

CSS 模拟float实现center文字左右环绕图片的效果
网页制作 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

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

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

效果的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;  /* 容器最大宽度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;
}

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

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

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

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

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

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

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

第一步，通过设置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。

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

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

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

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

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

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

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

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

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

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

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

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

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

标签：
CSS,模拟float,center文字,左右环绕图片
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接