介绍 & lt; style 类型=拔谋?css"比;
,,,.wrap {背景:# eee;,填充:,20 px;,}
,,,p {保证金:0;,}
,,,.left {宽度:200 px;,高度:,200 px;,浮动:,左,,背景:,珊瑚,,}
,,,.right {宽度:200 px;,高度:,200 px;,浮动:,对的;,背景:,lightblue;,}
,,,.middle {保证金:0,200 px;,背景:,lightpink;,}
& lt;/style>
& lt; div 类=皐rap"祝辞
,,,& lt; p 类=發eft"在我在左边& lt;/p>
,,,& lt; p 类=皉ight"在我在右边& lt;/p>
,,,& lt; p 类=癿iddle"在我排最后,但是跑到中间来了& lt;/p>
& lt;/div> <李> & lt; style 类型=拔谋?css"比;
,,,.wrap {背景:# eee;,填充:,20 px;,}
,,,p {保证金:0;,}
,,,.left {宽度:200 px;,高度:,200 px;,浮动:,左,,背景:,珊瑚,,margin-left:, -100%;}
,,,.right {宽度:200 px;,高度:,200 px;,浮动:,左,,背景:,lightblue;, margin-left:, -200 px;}
,,,.middle {宽度:100%;,高度:,200 px;浮动:,左,,背景:,lightpink;,}
,,,跨度{
,,,,,,,显示:,inline-block;
,,,,,,,保证金:,0,200 px;
,,,}
& lt;/style>
& lt; div 类=皐rap"祝辞
,,,& lt; p 类=癿iddle"比;
,,,,,,,& lt; span 类=癷nner"比;
,,,,,,,,,,,我在中间
,,,,,,,& lt;/span>,
,,,& lt;/p>
,,,& lt; p 类=發eft"在我在左边& lt;/p>
,,,& lt; p 类=皉ight"在我在右边& lt;/p>
& lt;/div> <李> & lt; style 类型=拔谋?css"比;
,,,.wrap {背景:# eee;,位置:,相对;}
,,,p {保证金:0;,}
,,,.left {宽度:200 px;,高度:,200 px;,背景:,珊瑚,,位置:,绝对的,左:,0;,:,0;}
,,,.right {宽度:200 px;,高度:,200 px;,背景:,lightblue;,位置:,绝对;右:,0;,:,0;}
,,,.middle {高度:200 px;,背景:,lightpink;,保证金:,0,200 px;}
& lt;/style>
& lt; div 类=皐rap"祝辞
,,,& lt; p 类=癿iddle"在我在中间,我用,margin 抵消左右两块定位元素占据空间& lt;/p>
,,,& lt; p 类=發eft"在我在左边,我是定位元素& lt;/p>
,,,& lt; p 类=皉ight"在我在右边,我是定位元素& lt;/p>
& lt;/div> <李> & lt; style 类型=拔谋?css"比;
,,,.wrap {背景:# eee;,显示:,flex}
,,,p {保证金:0;,}
,,,.left {宽度:200 px;,高度:,200 px;,背景:,珊瑚,,}
,,,.right {宽度:200 px;,高度:,200 px;,背景:,lightblue;,}
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关使用css怎么实现两边固定中间自适应布的局,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
<强>浮动
原理:
浮动元素和非浮动元素不在同一个立体空间,如果不清浮动,位置在它下面的元素将往上浮。
<李>浮动元素高度为0,浮动盒子层级比<代码>块> 内联/inline-block 水平盒子低。
<强>浮动内嵌div
原理:
三个元素都浮动,其中主题元素沾满一行100%,利用负利润率<代码> 把左右两边的元素放好。
<李>主题元素里面再套一个子元素,子元素<代码>保证金:0 200 px>
<强>定位
原理:
左右两个元素定位,可放任意位置。
<李>中间元素用<代码>保证金:0 200 px>
<强> flex
