Question

所以，我有三个div：

<div class="takeremaining">
  <div class="centeredcontent">
    This is my centered content
  </div>
</div>
<div class="dynamicallyallocated">
  This is my dynamic content
</div>

我希望最右边的div dynamicallyallocated根据内容使用display: inline-block;和另一个div takeremaining进行动态调整，以获取父div中的剩余空间。我用我的css试过这个：

.takeremaining {
  display: inline-block;
  width: 100%;
  float: left;
  background-color: #0000ff;
}

.centeredcontent {
  display: table;
  margin: 0 auto;
  background-color: #00ffff;
}

.dynamicallyallocated {
  display: inline-block;
  float: right;
  background-color: #00ff00
}

但是，正如this JSFiddle demo所示，div dynamicallyallocated位于takeremaining之下。我认为这是因为width: 100%;中的takeremaining，但我不确定如何根据dynamicallyallocated的条件宽度给它一个动态宽度。你会建议什么？

Answer 1

这是一个适合您的解决方案。

.container {
  display: table;
  width: 100%;
}

.takeremaining {
  display: table-cell;
  width: 100%;
  text-align: center;
  background-color: #0000ff;
}

.centeredcontent {
  display: inline-block;
  background-color: #00ffff;
}

.dynamicallyallocated {
  display: table-cell;
  width: 0;
  background-color: #00ff00;
  white-space: nowrap
}

<div class="container">
  <div class="takeremaining">
    <div class="centeredcontent">
      This is my centered content
    </div>
  </div>
  <div class="dynamicallyallocated">
    This is my dynamic content
  </div>
</div>

两个动态CSS列？

1 个答案: