<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<div class="container">
<div class="left">
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>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur magnam inventore officiis assumenda doloremque
</div>
<div class="middle">
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>
</div>
<footer>dksfkdsf</footer>
</body>
</html>