DIV实现三列等高布局，其他两列会随着某一列的增高而增高
我想很多人在DIV+CSS布局的时候都遇见过关于三列同等高布局的烦恼，今天在布局的时候我就遇到了这么一个问题！那么DIV等高布局的实现都有哪些呢？这里总结一些比较常见的实现CSS+DIV一行三列(等宽高,有间距)布局的方法，有的是通过背景图片实现假象的等高效果；还有的用js实现等等。这些都是方法，我们要的只是最终的结果；但是现在不用以上的方法，我们用纯DIV+CSS来实现三列等高！
现在我们来看看真正的 CSS 实现的等高布局，其方法主要是采用“正内补丁”、“隐藏容器溢出”和“负外补丁”结合的方法实现的。 下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例：
css代码：
| <style type="text/css">
|
html代码：
| <div id="wrap"> <div id="left"> <p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p> </div> <div id="center"> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> <p>center</p> </div> <div id="right"> <p>right</p> <p>right</p> <p>right</p> </div> </div> |
大家可以试试这个效果 个人感觉还是很不错的！轻松实现DIV+CSS等高布局。同时大家也可根据自己的需求在次上门加以修改完善。
除特别注明外，本站所有文章均为电信物联卡官网原创，转载请注明出处来自https://blog.21863.cn/post/66.html
