用DIV做不规则形状的环绕文字

最新推荐文章于 2023-10-18 14:22:50 发布
最新推荐文章于 2023-10-18 14:22:50 发布
阅读量2.5k 收藏
点赞数
分类专栏： Web Standard 文章标签： div class border xhtml html float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sugar88/article/details/426208
版权


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>
<head>
<title>不规则图片环绕文字</title>
<style>
html, body {
  margin: 0px;
  padding: 40px 0 0 100px;
  background:#000;color:#fff;font-size:14px;
}
div{margin: 0px;
  padding: 0px;
  border: 0px;
color:#fff;font-size:14px;}
#content {
  background: url(http://www.donews.net/images/www_donews_net/dodo/49134/o_003.jpg) no-repeat;
  margin: 0px;
  padding: 0px;
  border: 0px;
  line-height:155%
}
.blank {
  float: left;
  clear: left;
  margin: 0px 25px 0px 0px;
  font-size:9px;font-family:arial;
  height:21px
}
</style>
</head>
<body>
<div id="content">
<div class="blank" style="width:175px;">1 </div>
<div class="blank" style="width:180px;">2 </div>
<div class="blank" style="width:170px;">3 </div>
<div class="blank" style="width:166px;">4 </div>
<div class="blank" style="width:160px;">5 </div>
<div class="blank" style="width:155px;">6 </div>
<div class="blank" style="width:138px;">7 </div>
<div class="blank" style="width:136px;">8 </div>
<div class="blank" style="width:120px;">9 </div>
<div class="blank" style="width:126px;">10 </div>
<div class="blank" style="width:132px;">11 </div>
<div class="blank" style="width:138px;">12 </div>
<div class="blank" style="width:138px;">13 </div>
<div class="blank" style="width:138px;">14 </div>
月色正朦胧<br />
与清风把酒相送<br />
太多的诗颂<br />
醉生梦死也空<br />

和你醉后缠绵<br />
你曾记得<br />
乱了分寸的心动<br />
怎么只有这首歌<br />
会让你轻声合<br />
醉清风<br />

梦镜的虚有<br />
琴声一曲相送<br />
还有没有情浓<br />
风花雪月颜容<br />


</div>
</body>
</html>

sugar88
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1-4-3代码实例（顺时针div环绕）
Raquel1993
07-26 483
注意：父集有属性的赋值，子集在同一属性上新赋值无效，尤其注意.clear问题。可选择赋值在子集上。    浮动元素下新起一行要先清浮动。     父集无高度，清最下面div（需要全部包裹div，当然着眼于最下面）的浮动才能实现包裹。 Document .box{width: 400px;border:1px solid black;margin: 0px auto;} .b
CSS DIV制作梯形状的不规则网站导航
01-19
前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。 先看图（图片...
CSS用DIV做不规则形状的环绕文字
zgqtxwd的专栏
04-30 856
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
html是div环绕文字,文字环绕一个div在HTML
weixin_39651325的博客
06-17 575
看到，因为我不能用“浮动”，在我的标题“绝对”，文字环绕一个div在HTML我有几个div的嵌套我DIV，其中有些是浮动的范围内，并绝对定位的图像占位符。浮动div用于文本值我该如何使此div不重叠我目前的'蓝'图像占位符？它目前使用的布局：+----------------------------+| CREDIT CARD |+----------------------------+|...
html是div环绕文字,如何在右下角的div上环绕文字？
weixin_34620780的博客
06-17 492
每次我尝试在CSS中执行看似简单的操作时，它都不起作用。我有一个包含460x160图片的内容div。我要做的就是将图像放置在右下角，然后将文字环绕起来。 text text text text text text ...所以我希望它看起来像：------------------| text text text || text text text || text text -----|| te...
<<数学>>css文字是个不规则图形
知行和一
05-13 1034
文字有阴影 水平阴影、垂直阴影、模糊距离，以及阴影的颜色 text-shadow: 15px 25px 5px #FF0000,没有阴影的大小，阴影不能改变大小。 文字换行 word-wrap:break-word 文字有字体@font-face 可以用自己的字体@font-face { font-family: myFirstFont;//命名字体名字 src: url('Sansatio
不规则形状排列的css菜单导航.zip
07-11
在实现这样的不规则形状排列的css菜单导航时，开发者需要注意代码的可维护性和性能优化，避免过度使用复杂的CSS规则导致页面加载速度下降。同时，考虑到无障碍性（accessibility），确保键盘导航和屏幕阅读器能够...
文字环绕图片的布局效果(使用动态div实现)
09-25
3. 绝对定位（position: absolute）：为了实现文字环绕图片的特殊布局，可能需要使用绝对定位来精确控制元素的位置。例如，将图片设置为绝对定位，然后调整 `left` 和 `top` 属性使其在页面上居中。 4. 动态div：当...
不规则混排实现（实现图文环绕的效果）
adobe1992
07-24 2034
图文环绕方式的实现：     法一：（将图像一幅图像用Photoshop切割成若干个小的图片，然后设置小图片浮动显示） ”text/css”> .image{ float:left; clear:left; margin-right:2px; padding:0; } ”main”> ”image”>”../i
css+div图文环绕
笨笨的专栏
03-14 1702
css+div图文环绕 #demo{ font-size:12px; color:#333; width:550px; margin:10px 20px 0px 10px; line-height: 20px; text-indent: 24px; /*background-image:url(img/cobj.GIF); background-position: lef
文字绕圆排列：js
肖肖肖丽珠的博客
09-11 990
css文字让一个圆形排列 <template> <div class="container"> <div class="emblem"></div> </div> </template> <script> export default { data() { return { emb...
html div标签 圆弧,CSS圆弧遮罩
weixin_34853336的博客
06-17 808
想要实现少半圆圆弧遮罩，刚开始只是通过一个div标签，画一个长方形，通过border-radius属性设置来实现，对于半圆可以通过这个属性设置。但是对于图中所示的变更部分的遮罩来说，少半圆单单通过border-radius来实现不太可能，也可能是我的技术不够。最后实现的思路是：div标签里面包含两个div标签，在父div里面对其设置绝对定位；分别在两个子div里面设置对应的占位高度就可以了。预实现...
html div标签 圆弧,纯DIV+CSS实现圆角代码
weixin_35561409的博客
06-17 359
Div圆角实现 .one { display:block; overflow:hidden; height:1px; margin:0 4px; border-left:1px solid #B2D0EA; border-right:1px solid #B2D0EA; background:#B2D0EA; } .two { display:block; overflow:hidden; h...
不规则的文字环绕
Bunny的博客
10-18 100
我们将展示如何使用 CSS 的和clip-path属性来实现不规则的文字环绕效果。
indesign中怎么在冒号后面ctrl_indesign怎么换行？indesign文字怎么换行？
weixin_28754365的博客
12-30 922
indesign换行教程：1、确定文本应环绕在哪个元素周围。例如，如果要在照片或图形框架上环绕文本，请使用“选择”工具单击该框架。您选择的元素将以浅蓝色边框突出显示，并且在其拐角处具有手柄。2、转到“文字换行”调板。通过转到“窗口”找到调色板，然后选择“文本换行”。您也可以在PC上使用键盘命令“ Ctrl + Alt + W”，在Mac上使用“ Command + Option + W”。3、选择...
浅谈CSS文字环绕图片——自定义图片位置
热门推荐
筱葭的博客
12-17 1万+
常规的文字环绕图片，只需给图片一个浮动就可以了，但是图片往往在文字的左上角或者右上角。 下面将介绍两种方法，实现图片在文字左/右侧的任意位置，如右下角、右中间等等。 方法一： 原理：在图片所在的div前面增加一个宽度为1px的空div，使空div和图片所在的div都向左/右浮动，再清除图片所在的div受左/右浮动的影响。这样，空div 会把图片挤下去。修改空div的高度，可以调整图片的位
css 文字不规则排版,CSS3文字排版
weixin_31520593的博客
08-03 441
文字两边对齐Definition. Suibian Means "whatever".Origins from Mandarin, chinese.Will you join me as you said?No, i changed my mind! suibian!#suibien #shuibian#div1{width:200px;height:auto;text-align:justify...
css 文字不规则排版,DIV CSS解决不规则文字排版
weixin_34792546的博客
08-03 1068
网页设计时遇到不规则文字排版问题，通常通常情况下我们有两种选择，但是这两种方法都不是可靠的，遇到特殊的上网设备，更不能显示出来发挥它的作用。这里向大家介绍一下使用DIV CSS解决此问题。DIV CSS解决不规则文字排版问题我们在网页设计中，会遇到许多意想不到的情况，不规则文字排版就是其中之一了，我们该如何面对这样的排版要求呢?DIV CSS代码又该如何编写呢?遇到这样的情况，通常情况下我们有两...
如何实现不规则tab形状
最新发布
12-20
首先，你可以创建一个带有不规则形状的div元素，然后使用CSS来对其进行样式设置。你可以使用clip-path属性来定义不规则的形状，也可以使用transform属性来进行旋转或者缩放。另外，你还可以使用伪类元素来创建额外的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值