CSS基础之两栏布局的几种实现方法

谁住在深海的大包络里
195 阅读3分钟

float:left 和 margin-left

HTML部分

<div class="left">123456789</div>
<div class="right">123456789</div>

CSS部分

.left,.right{height: 300px;}
.left{width: 50%;background-color: blue;float: left;}
.right{margin-left: 50%;background-color: red;}

右右盒子设置：左外边距>=左盒子宽度，达到右盒子自适应

float:left 和 overflow:hidden

BFC ：块格式化上下文(Block Formatting Context)部分

BFC的布局规则：

  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算。

如何触发BFC

  1. float的值不是none。
  2. position的值不是static或者relative。
  3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  4. overflow的值不是visible

BFC的功能

  1. 清理浮动（使 BFC 内部浮动元素不会到处乱跑）
  2. 解决margin重叠（使普通元素与浮动元素之间实现margin）

HTML部分

<div class="left">123456789</div>
<div class="right">123456789</div>

CSS部分

.left,.right{height: 300px;}
.left{width: 50%;background-color: blue;float: left;}
.right{overflow:hidden;background-color: red;}

右侧设置的overflow:hidden会触发块级格式化上下文（BFC），右盒子可以用触发BFC的元素来清除左边浮动的影响。

position:absolute

HTML部分

<div class="box">
	<div class="left">left</div>
	<div class="right">right</div>
</div>

CSS部分

.box{position : relative;}
.left,.right{height: 300px;}
.left{ width:50%;background-color: blue;}
.right{ position: absolute; top: 0; left:50%; right: 0;background-color: red;}

通过设置相对父元素top:0,right=0,left=50%限制左边和右边位置，使宽度自适应。

table布局

HTML部分

<table>
<tbody>
    <td>
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20181214/ca7c6d9380aa4ff881fd9630dbeb0859.jpeg" width="750px">
    </td>
    <td>
        <img src="http://5b0988e595225.cdn.sohucs.com/images/20181214/877b429c822d49a8ad406063206b5f43.jpeg" width="750px">
    </td>
</tbody>
</table>
  1. 结构放到tbale中
  2. 两列分别放到两个td中，固宽的td设置一个宽度即可
  3. 二者间距使用任何一个td设置左或右边距即可。
  4. 同样实现了垂直居中布局

利用grid布局

HTML部分

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>        
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>        
</div>

CSS部分

p{margin: 0;}
.box{display:grid;grid-template-columns:auto 1fr;grid-gap:20px}

利用flex布局

HTML部分

<div class="box">
	<div class="left">left</div>
	<div class="right">right</div>
</div>

CSS部分

	.left,.right{height: 300px;}
	.left{width:50%;background-color:blue;}
	.right{flex: 1; background-color: red;}

flex布局中默认左起水平排序，并且不换行

效果

参考资料：

avatar
文章
阅读
粉丝