宽度自适应

最新推荐文章于 2023-11-04 18:58:10 发布

黎明不管黑夜的星空

最新推荐文章于 2023-11-04 18:58:10 发布

阅读量110

点赞数

分类专栏： htmlcss 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_50930483/article/details/124878467

版权

htmlcss 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、弹性布局-display:flex

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.content {
			width:100%;
			height:100px;
			/*
				弹性布局
			*/
			/*display:flex;*/

		}
	.left {
			width:400px;
			background-color:green;
			height:100px;
			/*
				浮动
			*/
			float:left;
		}
	.right {
			width:100%;
			background-color:red;
			height:100px;
		}
</style>
</head>

<body>
	<div class="content">
    	<div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

2、浮动布局-display:float

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局</title>
<style>
	.content {
			width:100%;
			height:100px;
		}
	.left {
			width:400px;
			background-color:green;
			height:100px;
			/*
				浮动
			*/
			float:left;
		}
	.right {
			width:100%;
			background-color:red;
			height:100px;
		}
</style>
</head>

<body>
	<div class="content">
    	<div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

3、table布局-display:table

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>浮动布局</title>
	<style>
		* {
			box-sizing: border-box;
		}

		.content {
			display: table;
			border: 1px solid #06c;
			padding: 15px 15px;
			max-width: 1000px;
			margin: 10px auto;
			min-width: 320px;
			width: 100%;
		}

		.img-box {
			height: 150px;
			width: 100px;
			border: 1px solid red;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			background-color: #4679bd;
		}

		.text-box {
			margin-left: 20px;
			border: 1px solid #ddd;
			padding: 10px;
		}
	</style>
</head>

<body>
	<div class="content">
		<div class="img-box">
			[图片上传失败...(image-5e66ac-1553415098492)]
		</div>
		<div class="text-box">
			<span>
				王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，>有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。
			</span>
		</div>
	</div>

	<div>
		父元素：display:table;
		子元素：display:table-cell;
		<p>(1) 空间平均划分：子级容器默认是自动平分宽度沾满父级容器</p>
		<p>(2) 设置其中一个table-cell为固定宽度：如果固定好其中一个子级容器，那么其余子级容器会自动平分宽度沾满父级容器；</p>
		<p>(3) 设置每一个table-cell为固定宽度</p>
		<p>(4) 把此元素放置在父元素的中部,即垂直居中—vertical-align:middle</p>
		<p>(5) 等高对齐
			是不对右侧的box设置display:table-cell，只对左侧，所以就会出现左侧跟随右侧高度变化而变化，如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。
		</p>
	</div>
</body>

</html>

4、网格布局-display:grid

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html5css3 阶段</title>
    <style>
        body {
            margin: 0;
            font-size: 20px;
        }
        .item-1 {
            background-color: red;
        }
        .item-2 {
            background-color: green;
        }
        .item-3 {
            background-color: blue;
        }
        .item-4 {
            background-color: orange;
        }

    </style>
</head>
<body>
    <style>
        .parent {
            width: 400px;
            background-color: #ccc;
            /* 把父元素设置为网格容器（行和列） */
            display: grid;
            /* 指定行的样式 (数量和高度) */
            /* 例如：以下表示网格容器划分1行,每行高度100px */
            /* grid-template-rows: 100px 100px; */
            grid-template-rows: 100px;
            /* 指定列的样式 (数量和宽度)*/
            /* 例如：以下表示网格容器划分2列,*/
            /* 第二列宽度自适应 */
            grid-template-columns: 50px auto;
        }
        .child-1 {
            background-color: red;
        }
        .child-2 {
            background-color: green;
        }
        

     
    </style>

    <div class="parent">
        <div class="child child-1">1</div>
        <div class="child child-2">2</div>
    </div>

</body>
</html>