一种后遗症比较多的多列自动对齐

在执行同一容器里的两列或者多列,不定高自动对齐的时候,最好的办法是使用JS。

下边这个方法虽然没使用JS完成了,但是后遗症比较多,不推荐使用。

仅仅是明白就好了。偶尔在不复杂的页面里可以用用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

<!--

body {

background-color: #fff;

height:100%;

font-size:12px;

text-align:center;

}

html{height:100%;}

.box{height:100%; background:#f9f9f9; width:450px; float:left; padding-left:50px;}

.box2{float:left; background:#ff9900; width:400px;height:auto; overflow:hidden;}

.left{width:190px; background:#ff6600; float:left; margin-right:10px;height:auto; padding-bottom:10000px !important; margin-bottom: -10000px !important;}

.right{width:200px; background:#ff6600; float:left;height:auto; padding-bottom: 10000px !important; margin-bottom: -10000px !important; }

-->

</style></head>

<body>

<div class="box">

<div class="box2">

<div class="left">

<p>1111</p>

<p>1111</p>

<p>1111</p>

<p>1111</p>

<p>1111</p>

<p>1111</p>

</div>

<div class="right">我自动跟右边对齐</div>

</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区