【代码】单用float 实现三列布局

来源：互联网发布：二二一数据有限公司编辑：程序博客网时间：2024/05/06 03:57

<!DOCTYPE html>

<head>

<title>三列自适应</title>

<style>

margin: 0;

padding: 0;

}

header,

footer {

height: 50px;

background: #00ffff;

}

.container {

border: 1px solid red;

}

.container:after{

display: block;

content: "";

clear: both;

}

.left{

width: 200px;

float: left;

background: yellow;

}

.right{

width: 100px;

float: right;

background: silver;

}

.middle {

margin: 0 100px 0 200px;

background: green;

}

</style>

</head>

<body>

<header>dsakf</header>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus iure inventore ipsum laudantium quas rem iste id aspernatur porro fugiat blanditcepturi, suscipit eos exercitationem quas aperiam perferendis. Minus cum, corporis rei

</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur magnam inventore officiis assumenda doloremque

</div>

Lorem ipsum dolociendis consequatur architecto.blanditiis, animi incidunt beatae reprehenderit. Minus asperiores dolores ipsum obcaecati ratione, ex. Quisquam perferendis, odio porro?iis dolores libero reprehenderit vero, mollitia deleniti vel officiis tempore!r sit amet, consectetur adipisicing elit. Blanditiis repellat in, facere ea at beatae optio quia ex

</div>

<footer>dksfkdsf</footer>

</body>

</html>

0 0