CSS怎么设分别置大DIV里面的3个并排小DIV靠左 居中 靠右！

Question

我应该怎么设置

Answer 1

1、可以使用flex布局快速实现这个效果。具体的方法是，首先打开hbuilder编辑器，新建一个文件，写入一个大的div，里面在包裹3个小div，给大div的class属性命名为container，小div命名为child：

2、然后在上方设置样式，先给外围的div设置宽度为600px以及display属性为flex，然后设置方向属性flex-direction为横向，接着设置小div的宽度为200px，再设置flex属性的值为1，意思是所占比例为1，最后调整一下背景颜色，字体大小就可以了：

3、最后打开浏览器，即可看到3个等份的div了：

Answer 2

是这样吗？

<style type="text/css">

.big{ width:600px; height:102px; position:relative; background:#ccc; text-align:center;}

.small1,.small2,.small3{ width:100px; height:100px; border:1px solid red; }

.small1{ position:absolute; left:0; top:0;}

.small2{ margin:0 auto;}

.small3{ position:absolute; right:0; top:0;}

</style>

<div class="big">

<div class="small1">small1</div>

    <div class="small2">small2</div>

    <div class="small3">small3</div>

</div>

Answer 3

<style type="text/css">

#main{

width:614px;

border:1px solid #006;

margin:0 auto;

    padding-top:2px;

padding-bottom:2px;

overflow:hidden;

}

.child_div{

width:200px;

height:200px;

border:1px solid #900;

margin-left:2px;

float:left;

}

</style>

<div id="main"><!--首先我们设置最外层div 给这个div设置一个宽度614  -->

  <div class="child_div"></div><!--设置子div 都设置为child_div类-->

  <div class="child_div"></div>

  <div class="child_div"></div>

</div>

有不懂的地方，欢迎留言

Answer 4

<div style="width:400px;">
<div style="width:100px; float:right; height:300px; background-color:#FFFF99;">右边</div>
<div style="width:100px; float:left; height:300px; background-color:#00FFFF;">左边</div>
<div style="height:300px; overflow:hidden; background-color: #EFEFEF;">中间</div>
</div>

中间的不设宽度，这样页面如果宽度放大的话，中间部分也可以自动伸展，而且这样布局也不用担心因为3个div都设了宽度导致容易出现换行错位的现象

Answer 5

解析：
一个左浮动；一个右浮动，解决靠左靠右；
居中：方法一、margin：auto属性可以使元素居中，方法2、使用绝对定位来居中；
如：
<div style="width:1000px;height:200px;background:#fff">
<div style="float:left;width:200px;height:200px;">靠左<div>

<div style="position:relative;left:50%;margin-left:-100px;width:200px;height:200px">居中<div>
<div style="float:right;width:200px;height:200px;">靠右<div>
</div>