Question

有两种情况：
1.两个div A＆amp; B在一个容器中并排
2.在中心的同一个容器中有一个div A

以下是一个示例：http://jsfiddle.net/lvil/toj9w9zz/

.container_one, .container_two {width:200px; height:100px; background-color:red;}
.container_one .inner_a {width:100px; background-color:green; float:left;}
.container_one .inner_b {width:100px; background-color:blue; float:right;}
.container_two .inner_a{width:100px; margin:0 auto; background-color:green;}

<div class="container_one">
    <div class="inner_a">
        a
    </div>
    <div class="inner_b">
        b
    </div>
</div>
<br>
<div class="container_two">
    <div class="inner_a">
        a
    </div>
</div>

假设容器具有相同的类（与示例中的不同）内部DIV的数量总是变化（1或2）有可能使css适合这两种情况吗？
我尝试过很多东西但是无法做到这一点。

Answer 1

你想要做的是使用display:inline-block而不是浮动，然后当它们是父级的最后一个孩子时，使用类.inner_a定位div，如下所示：

.container_one>div{
    display:inline-block;
    width:100px;
}
.inner_a{
    background-color:green;
}
.inner_a:last-child{
    margin:0 auto;
}
.inner_b{
    background-color:blue;
}

Answer 2

尝试inline-block，保留这两个div的inner_a规则并删除浮点数。

.container_one, .container_two {
  background-color: #ff0000;
  height: 100px;
  text-align: center;
  width: 200px;
}

.container_two .inner_a {
  background-color: #008000;
  display: inline-block;
  width: 100px;
}

Answer 3

以下代码是最好的和最少的代码：

.inner_a  {
  background-color: green;
  display: table;
  margin: 0 auto;
  width: 100px;
}

.container_one .inner_a  {
    float:left;
}
    .container_one,  .container_two  {
    width:200px;
     height:100px;
     background-color:red;
}

.container_one .inner_b  {
    width:100px;
     background-color:blue;
     float:right;
}

两个内部DIV并排，一个在中心

3 个答案: