三列布局：两边定宽，中间自适应，充满整个屏幕

最新推荐文章于 2022-06-22 21:32:58 发布

VIP文章 Delicia_Lani

最新推荐文章于 2022-06-22 21:32:58 发布

阅读量400

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_29918313/article/details/96438212

版权

一、使用flex布局

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	    html,body{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	    }
	 </style>
    </head>
    <body>
	<div style="display: flex;width: 100%;height: 100%;">
	    <div style="width: 100px;background: blue;">好好学习</div>
	    <div style="background: red;width: auto;flex: 1;">好</div>
	    <div style="width: 100px;background: blue;">天天向上</div>
	</div>
    </body>
</html>

最低0.47元/天解锁文章

优惠劵

Delicia_Lani

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
三列布局：两边定宽，中间自适应，充满整个屏幕

一、使用flex布局<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ width: 100%; height: 10...
复制链接

扫一扫