如何实现多个DIV并排一列
本人小白初学，刚刚尝试了一下div的并排，3个和3个以上的并排就不会了，想请问应该怎么写，似乎都是2边固定，中间自适应这样的，是考虑到浏览器的宽度问题？有都是固定的做法么，请大神指点下，先谢谢了
Henson_X浏览 17057回答 13
13回答
-
sunyaox
<!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
您的问题标题应该错了，我想你应该想问：“如何实现多个DIV并排一行”，div是块儿元素会自动换行显示。如果要实现多个div并列一行显示建议用float（浮动），不妨将全部的div左浮动，如果这些div的父元素没有设置高度的话，请清除浮动，避免影响到下面的元素的位置。“似乎都是2边固定，中间自适应这样的”，你这句话的意思我没太明白，可能你是想表达，水平居中吧，水平居中直接使用：margin-left: auto; margin-right: auto; -
echo_kinchao
浮动或者内敛元素不久在同一排了吗 -
完全不会JS
引入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> -
一步十年
标题应该是div并排一行吧，。。全部左浮动就行了，浮动会使元素脱离文档流，使紧相邻的元素进行环绕。使多个元素并排一列不就是块元素在文档流中的本身特性吗..。。 -
Queenpp
用float -
zeroweb
我常用的方法是float：left; display:inline-block;根据项目设计图确定div宽高就可以 -
框架
display:inline 或者 float:left 设置display:inline后height无效。 -
Deppon_L
float:left; 注意div宽度总和不要大于浏览器宽度，否则换行显示 -
女皇莅临
全部左浮动，设置每一个的宽度和高度，和margin-left，至于数值就看你自己慢慢算了。
随时随地看视频慕课网APP
Html/CSS