固比固模型用与垂直居中pc端页面书写

谁借莪１个温暖的怀抱￠ 2021-09-18 13:54 129阅读 0赞

* {
    		padding: 0;
    		margin: 0;
    	}
    	ul, ol {
    		list-style: none;
    	}
    	a {
    		text-decoration: none;
    		color: #000;
    	}
    	.box {
    		width: 100%;
    		overflow: hidden;
    	}
    	.box p {
    		float: left;
    		height: 200px;
    	}
    	.box p:first-child {
    		width: 200px;
    		background-color: green;
    	}
    	.box p:last-child {
    		width: 200px;
    		background-color: green;
    	}
    	/*2号元素宽度自适应  计算*/
    	.box p:nth-child(2) {
    		/*计算*/
    		width: calc(100% - 400px);
    		height: 200px;
    		background-color: orange;
    	}
    
    	</style>
    </head>
    <body>
    	<div class="box">
    		<p>1</p>
    		<p>2</p>
    		<p>3</p>
    	</div>
    </body>

![20190321203419357.png][]

固比固的弹性盒

1	.box {
    2		/*父盒子设置弹性盒容器*/
    3		width: 100%;
    4		display: -webkit-flex;
    5		/*子盒子自动并排显示 不需要设置浮动*/
    6	}
    7	.box p:first-child {
    8		width: 200px;
    9		height: 200px;
    10		background-color: lightblue;
    11	}
    12	.box p:nth-child(2) {
    13		/*宽度自适应*/
    14		-webkit-flex: 2222;
    15		height: 200px;
    16		background-color: green;
    17	}
    18	.box p:last-child {
    19		width: 200px;
    20		height: 200px;
    21		background-color: orange;
    }

[20190321203419357.png]: /images/20210812/5bff2622539f4460a7d242ca2474ec33.png

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 PC端页面布局 - 元素在父元素里上下左右居中

较系统的学习前端PC端布局两周了，一直遇到子元素在父元素里面水平、垂直居中的问题。现在来整理一下。水平居中总结了几个方法。 1、margin:0 auto;

以你之姓@/ 2023年06月24日 10:26/ 0 赞/ 39 阅读

相关前端---H5移动端页面在PC端居中显示

一行CSS样式搞定 body{ max-width: 640px; margin: 0 auto !important;

淩亂°似流年/ 2022年09月11日 05:22/ 0 赞/ 762 阅读

相关 CSS 实现水平居中与垂直居中

面试时遇到这个问题，当时答得很不全面，有必要做个总结。一、水平居中的实现 -------------------- 1. 行内元素解决方案在行内元素的父级

左手的ㄟ右手/ 2022年05月27日 05:51/ 0 赞/ 418 阅读

相关腾讯云乐固客户端加固打包上线流程

腾讯云乐固打包上线流程我们的android app开发好之后，都要走一个上架流程，但是在上架之前，我们要做一些操作，什么操作呢？比如混淆，或者app加固，得

绝地灬酷狼/ 2022年05月26日 12:25/ 0 赞/ 548 阅读

相关腾讯乐固使用

正常流程： 1、加固 2、重签名多渠道流程： 1、加固 2、重签名 3、打多渠道包 4、多渠道包重签名（不重新签名的话，不能正常安装）自动多渠道流程： 1

超、凢脫俗/ 2022年05月19日 02:55/ 0 赞/ 332 阅读

相关固网+G网业务营销方案

现联通公司由原网通公司和原联通G网合并组成，经营全方位营销业务，如固网、移动G网、光纤、互联网、数据电路、网元出租等业务。一、超级固动业务（联通手机G网+固话）：

梦里梦外;/ 2022年05月13日 20:11/ 0 赞/ 200 阅读

相关 div在整个页面实现垂直居中

<style> test{ width:100px; height:100px; position:absolute; left

╰半橙微兮°/ 2022年04月22日 02:54/ 0 赞/ 237 阅读

相关 js——同时校验手机号和固话

<table> <tbody> <tr> <td align="left"><font>前言 </font></td> </tr> </tbody

港控/mmm°/ 2022年03月18日 07:57/ 0 赞/ 370 阅读

相关常见电脑固障处理

1：主板故障 2：显卡故障 3：声卡故障 4：硬盘故障 5：内存故障 6：光驱故障 7：鼠标故障 8：键盘故障 9：MODEM故障 10：打

向右看齐/ 2022年01月13日 07:41/ 0 赞/ 77 阅读

相关固比固模型用与垂直居中pc端页面书写

{ padding: 0; margin: 0; } ul, ol { list-style: none;

谁借莪１个温暖的怀抱￠/ 2021年09月18日 13:54/ 0 赞/ 130 阅读