Question

我有以下代码，我想将左div自动移动到中心而右边的div不存在。

<div class="main-content" style="width: 100%;">

  <div class="left" style="float:left; width: 70%;">
     <p>Left DIV Contents here..</p>
  </div>

  <div class="right" style="float:left; width: 30%;">
    <p>Right DIV Contents here..</p>
  </div>

</div>

提前致谢..

Answer 1

您可以使用:only-child或:only-of-type伪类来定位.left DIV元素，该元素是唯一的孩子或仅类型父母的元素。

此外，为了覆盖内联样式，您可以在声明中使用!important关键字：

div.left:only-child { /* or :only-of-type */
    float: none !important;
    margin: 0 auto !important;
}

<强> Working Demo

值得注意的是:only-child或:only-of-type伪类are supported in IE9+。

Answer 2

如果您不介意切换标记以使元素从右侧浮动，则可以使用相邻的兄弟选择器来实现您正在寻找的效果：

<强> HTML

<div class="main-content" style="width: 100%;">
  <div class="right">
    <p>Right DIV Contents here..</p>
  </div>
  <div class="left">
     <p>Left DIV Contents here..</p>
  </div>
</div>

<强> CSS

.main-content{width:100%}
.right{float:right; width:30%}
.left{text-align:center}

.right + .left{text-align:left; float:right; width:70%}

JSFiddle

Answer 3

尝试使用display:table-cell

.main-content{
   display:table  
}
.left{
  width:70%;
  background:brown;
  display:table-cell
}
.right{
  width: 30%;
  background:green;
  display:table-cell
}

<强> DEMO

如何将右div移动到中心而右移div /删除？

3 个答案: