DIV+CSS自适应换行显示

最新推荐文章于 2024-01-18 14:47:02 发布
最新推荐文章于 2024-01-18 14:47:02 发布
阅读量622 收藏 1
点赞数
分类专栏： div+css 文章标签： div css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_21270/article/details/82197113
版权

 DIV+CSS自适应换行显示

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div+css---自动换行</title>
</head>

<body>
<style>

.divall{
width:90px;
float:left;
padding-left:10px !important;
padding-left:10px;
padding-right:10px !important;
padding-right:10px;
cursor:pointer;
border:0px solid #cccccc;
}

.divtitle{
height:20px;
line-height: 20px;
margin-bottom:10px;
}

.divtitle1{
width:99%;
text-align:center;
}
.divcontent{
height:85px;
width:100%;
}
</style>
<div style="width:330px; height:235px; border:1px solid #cccccc;">
			
			<div class="divall">
				<div class="divcontent">
					<div class="icon_item" >
						<img src="http://www.iteye.com/images/user-logo.gif?1308833137" alt="iteye" width="85" height="85" border="0"/>
                    </div>
				</div>
				<div class="divtitle">
					<div class="divtitle1"><a href="javascript:void(0)" title="iteye">iteye</a></div>
				</div>
			</div>

			<div class="divall">
				<div class="divcontent">
					<div class="icon_item" >
						<img src="http://www.iteye.com/images/user-logo.gif?1308833137" alt="iteye" width="85" height="85" border="0"/>
                    </div>
				</div>
				<div class="divtitle">
					<div class="divtitle1"><a href="javascript:void(0)" title="iteye">iteye</a></div>
				</div>
			</div>

			<div class="divall">
				<div class="divcontent">
					<div class="icon_item" >
						<img src="http://www.iteye.com/images/user-logo.gif?1308833137" alt="iteye" width="85" height="85" border="0"/>
                    </div>
				</div>
				<div class="divtitle">
					<div class="divtitle1"><a href="javascript:void(0)" title="iteye">iteye</a></div>
				</div>
			</div>

			<div class="divall">
				<div class="divcontent">
					<div class="icon_item" >
						<img src="http://www.iteye.com/images/user-logo.gif?1308833137" alt="iteye" width="85" height="85" border="0"/>
                    </div>
				</div>
				<div class="divtitle">
					<div class="divtitle1"><a href="javascript:void(0)" title="iteye">iteye</a></div>
				</div>
			</div>

			<div class="divall">
				<div class="divcontent">
					<div class="icon_item" >
						<img src="http://www.iteye.com/images/user-logo.gif?1308833137" alt="iteye" width="85" height="85" border="0"/>
                    </div>
				</div>
				<div class="divtitle">
					<div class="divtitle1"><a href="javascript:void(0)" title="iteye">iteye</a></div>
				</div>
			</div>

			<div class="divall">
				<div class="divcontent">
					<div class="icon_item" >
						<img src="http://www.iteye.com/images/user-logo.gif?1308833137" alt="iteye" width="85" height="85" border="0"/>
                    </div>
				</div>
				<div class="divtitle">
					<div class="divtitle1"><a href="javascript:void(0)" title="iteye">iteye</a></div>
				</div>
			</div>

</div>

</body>
</html>
iteye_21270
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css如何实现自动换行,CSS实现自动换行的方法
weixin_29982199的博客
08-04 5万+
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！对于div1、(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;width:200px;}...
div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...
09-25
当一行文字超过DIV或者Table的宽度的时候，浏览器中默认是让它换行显示的，如果我们不想让他换行显示那要怎么办呢，下面为大家介绍下如何设置div+CSS设置一行内文字超过宽度不换行且不显示
CSS 实现平均分布，自适应换行，不限数量
最新发布
weixin_44146288的博客
01-18 900
使用grid布局，让内部元素在横向自动分配数量
CSS+DIV换行的问题
zccluck的博客
07-18 389
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换 行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定...
css实现div自适应与文字超出换行
weixin_30690833的博客
02-17 816
html,body{ height:100%; //关键} /*包裹其他所有div的div*/ #cover { width:100%; //关键 height:auto; //关键 border-radius: 10px; background-size:100% auto; background-repeat:no-repeat; background-image: url('...
CSS——css 文字自动换行方法
qq_43201350的博客
01-07 2072
CSS——css 文字自动换行方法
CSS 自适应div 内容折行
拒绝成猿的程序员
04-12 4803
现象 如图，在一行自适应宽度的div中，原本是两个均分宽度的div,由于其中一个内部单行文本超出，造成宽度变长。 解决方法 在适应布局的div内部 使用table元素布局。不仅要对table设置 table-layout,还要有 width宽度继承父级的设置 <div> <!-- 自适应的div--> <table style="tab...
CSS 实现div宽度根据内容自适应
09-24
需要注意的是，内联元素如`span`或`a`天生就是宽度自适应的，它们的宽度会根据内容自动调整，但通常不适用于需要换行或独立占据一行的情况，而div作为块级元素，更适合用于构建这样的布局。 此外，还可以使用其他...
DIV CSS 图片自动换行
07-17
在网页设计中，"DIV CSS 图片自动换行"是一个常见的布局技巧，它涉及到CSS（层叠样式表）中的盒模型、布局模式以及响应式设计。这个技术主要用于展示一组图片，使得图片能够在页面中自动适应并换行排列，同时还可以...
div+css样式表
01-08
在中文网页设计中，`div+css`的应用尤其重要，因为中文字符的排列和显示方式与英文有很大区别。例如，中文通常是以双字节字符的形式存在，这可能会影响到文字的对齐、换行以及布局计算。使用CSS，我们可以精确地控制...
聊天气泡背景自适应内容宽度高度
09-07
聊天气泡背景自适应文字宽度，和高度， 随文字内容适应显示背景，简单简单简单简单的简单简单简单的的小demo
根据屏幕宽度及展示内容换行
01-28
添加View后，会根据屏幕宽度和View的内容（View内容可以宽度可以不同）判断是否需要换行展示，实现不同的屏幕大小横向展示不同的样式
div+css属性.docx
02-27
3. `overflow`管理超出元素边界的内容，可以是`visible`（默认，内容溢出），`hidden`（隐藏溢出内容），`scroll`（显示滚动条）或`auto`（根据需要显示滚动条）。 4. `clip`属性用于裁剪绝对定位元素的可视区域。 ...
CSS 中几种常用的换行方法
热门推荐
m0_47791238的博客
10-12 2万+
white-space 属性可以控制元素中文本的换行方式。word-break 属性可以控制单词在换行时的断开方式。：允许在单词内部断行，例如超出容器宽度时会将单词拆分为多行显示。（默认值）：文本自动换行，默认情况下会根据容器的大小自动换行。：保留原始的空白符（空格和换行符），文本按照源码中的格式显示。：保留原始的空白符，文本在遇到边界时会自动换行。：合并连续的空白符，文本在遇到边界时会自动换行。：尽量保持多字母语言的连续性，适用于东亚语言。：文本不进行换行，超过容器宽度时会溢出。
DIV的内容自动换行
qq_41451744的博客
11-01 5830
div 内容自动换行
HTML入门（flex拆行）————DAY6
详情请看注释
10-17 1007
flex元素是一种类似于float让div元素在所属框内更好的找到自己应该在的位置。 但是flex默认的里面的盒元素是不会自己进行折行的，所以需要进行一些设置，来得到更好的效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n...
Div+css下HTML设计三列自适应宽度出现换行的解决办法
07-14 4013
症状： HTML文件源码如下：   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 #content #sideR {  background: #9966FF;  float: right;  height: 300p
css写一个自适应并且自动换行的代码
qq_40673860的博客
01-15 1076
grid-template-columns: repeat(auto-fit,minmax(384px,1fr)); 效果如下：
CSS样式自动换行（总结）
qq_43437571的博客
07-17 1万+
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal ,当定义的宽度之后自动换行 <div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> #wrap { white-space: normal;
html+css自适应左图右文布局
06-06
可以使用flexbox布局实现左图右文布局，同时使用媒体查询来实现自适应。 HTML代码： ``` <div class="container"> <img src="image.jpg" alt="Image"> <div class="text"> <h2>Heading</h2> <p>Text here...</p> </div> </div> ``` CSS代码： ``` .container { display: flex; flex-wrap: wrap; align-items: center; } img { flex: 0 0 50%; max-width: 50%; margin-right: 20px; } .text { flex: 1; } @media (max-width: 768px) { .container { flex-direction: column; } img { max-width: 100%; margin-right: 0; margin-bottom: 20px; } } ``` 在上面的代码中，我们使用了flexbox布局来实现左图右文布局。`flex-wrap: wrap`属性可以使得容器内的元素自动换行。`align-items: center`属性可以使得容器内的元素在纵向方向上垂直居中。`flex: 0 0 50%`属性可以使得图片占据容器宽度的50%，而`flex: 1`属性可以使得文本占据剩余的宽度。 媒体查询可以在屏幕宽度达到一定值时，改变布局方式。在上面的代码中，我们使用`@media`查询，在屏幕宽度小于等于768px时，将容器的`flex-direction`属性改为`column`，使得图片和文本在纵向方向上排列，同时将图片的`max-width`属性设为100%，使得图片在小屏幕上可以占据整个屏幕宽度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值