本人小白初学，刚刚尝试了一下div的并排，3个和3个以上的并排就不会了，想请问应该怎么写，似乎都是2边固定，中间自适应这样的，是考虑到浏览器的宽度问题？有都是固定的做法么，请大神指点下，先谢谢了
13 回答
sunyaox
TA贡献68条经验 获得超6个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用浮动就可以并排多个div了，试试吧</title>
<style type="text/css">
*{margin:0;padding:0;font-size:14px;}
.w-1000{width:1000px;background-color:#eee;margin: 0 auto;}
.sub{width:300px;height:300px;background-color:#f60;margin-left:10px;float:left;}
</style>
</head>
<body>
<!-- -->
<div class="w-1000">
<div class="sub">1</div>
<div class="sub">2</div>
<div class="sub">3</div>
</div>
</body>
</html>
Just90
TA贡献3条经验 获得超8个赞
您的问题标题应该错了，我想你应该想问：“如何实现多个DIV并排一行”，div是块儿元素会自动换行显示。如果要实现多个div并列一行显示建议用float（浮动），不妨将全部的div左浮动，如果这些div的父元素没有设置高度的话，请清除浮动，避免影响到下面的元素的位置。“似乎都是2边固定，中间自适应这样的”，你这句话的意思我没太明白，可能你是想表达，水平居中吧，水平居中直接使用：margin-left: auto; margin-right: auto;
完全不会JS
TA贡献8条经验 获得超2个赞
引入bootstrap
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div>
一步十年
TA贡献11条经验 获得超0个赞
标题应该是div并排一行吧，。。全部左浮动就行了，浮动会使元素脱离文档流，使紧相邻的元素进行环绕。使多个元素并排一列不就是块元素在文档流中的本身特性吗..。。
何月
TA贡献4条经验 获得超1个赞
左边一个div，右边一个div,中间放一个，然后在中间的div内嵌套新的div。。。。
或者全部左浮动或者右浮动，然后div的宽度注意调控，加起来不要超过100%，好像可以吧。。。。
- 13 回答
- 1 关注
- 17436 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消