4或5个模型水平对齐排列
刚刚问了慕友了
如何让3个模块一个左边一个居中一个右边
慕友的回答直接解决了我的问题：如下图
那么现在如果有4个或者以上模块我需要并排对齐显示要怎么做
div{
border:2px red solid;
width:30px;
height:50px;
}
</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
<div id="div3">栏目3</div>
<div id="div4">栏目4</div>
比如这样的效果
个回答
-
- 子非鱼阳明
- 2016-08-18 16:06:52
涉及到布局，还要给块命名 <div class="">
-
- nima3693049
- 2016-08-18 19:48:23
这样呢
<html>
<head>
<style type="text/css">
.div {
border: 2px red solid;
width: 80px;
height: 50px;
margin:auto;
}
tr {
width:100%;
}
.tbl {
width:100%;
margin:auto;
}
</style>
</head>
<body>
<table class="tbl">
<tr>
<td>
<div class="div">section 1</div>
</td>
<td>
<div class="div">section 2</div>
</td>
<td>
<div class="div">section 3</div>
</td>
<td>
<div class="div">section 4</div>
</td>
</tr>
</table>
</body>
</html>
-
- qq_一匹马赛克_03816094
- 2016-08-18 16:52:06
<ul>
<li class="a"></li>
<li class="b"></li>
<li class="c"></li>
<li class="d"></li>
</ul>.a{
width: 20px;
height: 100px;
background-color: red;
margin-bottom: 100px;
}
.b{
width: 20px;
height: 100px;
background-color: red;
}
.c{
width: 20px;
height: 100px;
background-color: red;
}
.d{
width: 20px;
height: 100px;
background-color: red;
}
li{
float:left;
margin-right: 100px;
}这样可以么？