关于div css的一个问题
现在有id为1、2、3、4的4个div,每个div里都有一个ul，要求这4个div都能根据各自的ul调整高度，然后4个div在竖直方向上按顺序排列，每两个之间间距10px...
现在有id为1、2、3、4的4个div,每个div里都有一个ul，要求这4个div都能根据各自的ul调整高度，然后4个div在竖直方向上按顺序排列，每两个之间间距10px，请问代码应该怎么写？
展开
展开全部
效果见图片。
代码如下：
<style>
* { margin: 0; padding: 0; color: #fff; }
div { width: 100px; margin-bottom: 10px; }
#one ul { height: 30px; background-color: red; }
#two ul { height: 40px; background-color: green; }
#three ul { height: 50px; background-color: gray; }
#four ul { height: 60px; background-color: blue; }
</style>
<div id="one"><ul>one</ul></div>
<div id="two"><ul>two</ul></div>
<div id="three"><ul>three</ul></div>
<div id="four"><ul>four</ul></div>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
题目中的错误：id名不能以数字开头
<!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>4列布局</title>
<style type="text/css">
body,html{margin:0;padding:0;}
.wrap{width:960px;margin:0 auto;overflow:hidden;zoom:1;}/*总的长度*/
.wrap div{width:25%;float:left;clear:left;margin-bottom:10px;}/*四等分*/
.wrap ul{margin-left:10px;border-left:1px solid #def028;padding-left:20px;margin-top:0;margin-bottom:0;}
#a1{background-color:blue;}
#a2{background-color:orange;}
#a3{background-color:darkred;}
#a4{background-color:darkgreen;}
/*实现水平假等高
.wrap div{margin-bottom:-10000px;padding-bottom:10000px;clear:none;}
*/
</style>
</head>
<body>
<div class="wrap">
<div id="a1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="a2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="a3">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div id="a4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>
<!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>4列布局</title>
<style type="text/css">
body,html{margin:0;padding:0;}
.wrap{width:960px;margin:0 auto;overflow:hidden;zoom:1;}/*总的长度*/
.wrap div{width:25%;float:left;clear:left;margin-bottom:10px;}/*四等分*/
.wrap ul{margin-left:10px;border-left:1px solid #def028;padding-left:20px;margin-top:0;margin-bottom:0;}
#a1{background-color:blue;}
#a2{background-color:orange;}
#a3{background-color:darkred;}
#a4{background-color:darkgreen;}
/*实现水平假等高
.wrap div{margin-bottom:-10000px;padding-bottom:10000px;clear:none;}
*/
</style>
</head>
<body>
<div class="wrap">
<div id="a1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="a2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="a3">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div id="a4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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">
div{ width:900px}
div div { width:200px; float:left; border:1px solid #ccc;}
div #1,div #2,div #3,div #4 { margin-left:10px;}
</style>
</head>
<body>
<div>
<div id="1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div id="2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="3">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="4">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</body>
</html>
<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">
div{ width:900px}
div div { width:200px; float:left; border:1px solid #ccc;}
div #1,div #2,div #3,div #4 { margin-left:10px;}
</style>
</head>
<body>
<div>
<div id="1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div id="2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div id="3">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="4">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果不考虑width，就一margin:5px 0;就可以了。height不用设
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
