关于四块内容垂直水平居中的CSS笔试题

最新推荐文章于 2024-04-04 02:46:43 发布

清枫草塘

最新推荐文章于 2024-04-04 02:46:43 发布

阅读量1.9k

点赞数

分类专栏：前端开发文章标签： CSS居中垂直居中水平居中自适应

本文链接：https://blog.csdn.net/freshlover/article/details/9358027

版权

前端开发专栏收录该内容

42 篇文章 2 订阅

订阅专栏

CSS笔试题（只用CSS实现，不用js）：

：四块内容相对浏览器垂直居中、水平居中，每块中按从上到下顺序包括：副标题，正标题，图片（150 x 100），正文内容。要求4张图片水平对齐，图片上下的内容自适应分别向上下延伸。

自己写了一个解决方案，贴代码：

<style>
body{font-family:"Microsoft Yahei",simsun;font-size:14px;}
body,p,ul,li,dd,dt{margin:0;padding:0;}
img{border:0 none;}
ul,li,ol{list-style:none;}
.clear{clear:both;}
p{font:14px/1.5 simsun;padding:5px 0;text-align:left;}
.alignDemo{color:#333;width:900px;margin:0 auto;top:50%;left:50%;margin-top:-50px;margin-left:-450px;position:absolute;}
.alignDemo ul{}
.alignDemo ul li{width:150px;height:100px;float:left;margin-right:100px;position:relative;}
.alignDemo ul li.lr{margin-right:0;}
.alignDemo ul li .img img{width:150px;height:100px;}
.alignDemo ul li p{
width:150px;word-wrap:break-word;word-break:break-all;
/*div容器中内容将在边界换行，（word-wrap）英语句子中单词内不强制换行。（word-break）如果需要，词内换行。*/
}
.alignDemo ul li > div{position:absolute;}
.alignDemo ul li .tit{bottom:100px;}
.alignDemo ul li .con{top:100px;}
</style>

HTML代码：

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="alignDemo">
	<ul>
		<li>
			<div class="tit">
				<p class="subtit">副标题副标题副标题副标题副标题</p>
				<p class="maintit">标题标题标题标题标题标题标题标题标题</p>
			</div>
			<div class="img"><img src="http://game.feiliu.com/uploadimage/youxibaodianwenzhang/image/20130715/20130715170526_61336.jpg" /></div>
			<div class="con">
				<p class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
			</div>
		</li>
		<li>
			<div class="tit">
				<p class="subtit">有多长有多长有多长有多长有多长有多长how many apples do you have? 123456789123456789123456789123456789123456789</p>
				<p class="maintit">有多长有多长有多长有多长有多长有多长有多长有多长有多长有多长</p>
			</div>
			<div class="img"><img src="http://game.feiliu.com/uploadimage/youxibaodianwenzhang/image/20130715/20130715170526_61336.jpg" /></div>
			<div class="con">
				<p class="content">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
			</div>
		</li>
		<li>
			<div class="tit">
				<p class="subtit">标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字标题文字</p>
				<p class="maintit">标题标题标题标题标题标题标题标题标题</p>
			</div>
			<div class="img"><img src="http://game.feiliu.com/uploadimage/youxibaodianwenzhang/image/20130715/20130715170526_61336.jpg" /></div>
			<div class="con">
				<p class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容增加内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容增加</p>
			</div>
		</li>
		<li class="lr">
			<div class="tit">
				<p class="subtit">副标题副标题副标题副标题副标题</p>
				<p class="maintit">标题标题标题标题标题标题标题标题标题</p>
			</div>
			<div class="img"><img src="http://game.feiliu.com/uploadimage/youxibaodianwenzhang/image/20130715/20130715170526_61336.jpg" /></div>
			<div class="con">
				<p class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
			</div>
		</li>
	</ul>
	<div class="clear"></div>
</div>

</body>
</html>

预览效果：

清枫草塘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于四块内容垂直水平居中的CSS笔试题

CSS笔试题（只用CSS实现，不用js）：：四块内容相对浏览器垂直居中、水平居中，每块中按从上到下顺序包括：副标题，正标题，图片（150 x 100），正文内容。要求4张图片水平对齐，图片上下的内容自适应分别向上下延伸。自己写了一个解决方案，贴代码：body{font-family:"Microsoft Yahei",simsun;font-size:14px;}body,p,ul
复制链接

扫一扫