Question

我有两个相邻的div - 左右一个。

有可能，正确的一个将会消失，然后我希望左边的一个居中。

HTML

<div class="contener">
  <div class="left"></div>
  <div class="right></div>
</div>

CSS：

.left {
  width: 75%;
  height: 240px;
  float: left;
}

.right {
  width: 25%;
  height: 250px;
  float: right;
}

Answer 1

.contender{
 text-align:center;
}
.left {
  width: 75%;
  height: 240px;
  text-align:left;
  display:inline-block;
  zoom:1;
   *display:inline;
 }
.right {
  width: 25%;
  height: 250px;
  text-align:left;
  display:inline-block;
  zoom:1;
  *display:inline;
 }

星号（*）用于修复ie7，因此它有点像黑客。

Answer 2

您可以将display和.left的{{1}}属性设置为.right，并将父元素的inline-block设置为jayaguilar指向出。然而，并不是说这不会与您确切的text-align:center和css一起工作。

您需要删除html标记中的内联元素之间的line break，如下所示：

html

或将其评论

<div class="container">
    <div class="left"></div><div class="right"></div>
</div>

或将<div class="container"> <div class="left"></div><div class="right"> </div>缩减为小于width的内容，以便在100%元素之后容纳空格。

Demo（点击删除按钮）

Answer 3

<div class="contener">
  <div class="left"></div>
  <div class="right"></div>
</div>

现在有些简单的jQuery：

$(".right").click(function() {

        $(this).hide();

    $(".left").css({ 'text-align': 'center'});
});

因此，我们将“desapear”变为正确的，然后你用左手做你想做的事！：）

当其他div移除时，DIV居中

3 个答案: