使用css实现并列div高度随动
1.写出基本的html结构和css样式
<html lang="en"> <head> <meta charset="UTF-8"> <title>DIV高度自适应</title> <style> .container{
display:table; width:900px; min-height:300px; margin: 100px auto; background-color:#ccc; } .col{
display:table-cell; text-align:center; width:300px; top:0; bottom:0; font-size:50px; } .col1{ background-color:#369; } .col2{ background-color:#963; } .col3{ background-color:#936; } </style> </head> <body> <div class="container"> <div class="col col1">1</div> <div class="col col2">2</div> <div class="col col3">3</div> </div> </body> </html>
当1,2,3中任意一个高度变化的时候,会影响其他两个,先在1中添加几个p标签做一下实验来证实
<div class="col col1"> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> </div>