让lefts的div占据所有空间

Question

当有2个div时，一个在左边，一个在右边。 是否可以将右侧div一直对齐固定宽度并使左侧div占用剩下的所有空间？

我不想使用内联 -

Answer 1

您可以在此处使用CSS CharSequence myString = "hello"; getLength(myString); // error // ... public int getLength(String text) { return text.length(); } 来减去来自calc() function div的固定width div的.right。

  

calc（）CSS函数允许您在指定时执行计算   CSS属性值。

.left

#bx{
  background:black;
  height:200px;
  padding:10px;
}
#bx > .left{
  display:inline-block;
  width:calc(99% - 200px); /*Minus width of .right using calc()*/
  height:100%;
  background:yellow;
}
#bx > .right{
  display:inline-block;
  width:200px;
  height:100%;
  background:red;
}

Answer 2

我认为这可以完成你的目标，但我不确定它是最好的方式......

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}

.sidebar {
  float: right;
  width: 200px;
  height: 200px;
  background-color: blue;
}

.content {
  background-color: red;
  height: 200px;
  margin-right: 200px;
}

<div class="sidebar">width: 200px</div>
<div class="content">
</div>

Answer 3

有很多方法可以达到这个目的，但是你可能想要使用灵活盒子，因为它现在被广泛使用。

检查caniuse，看它是否符合您的浏览器要求。

标记：

<div class="container">
  <div class="left-container">Autofill remaining width</div>
    <div class="fixed-container">200px</div>
</div>

CSS：

.container{
  display: flex;
}
.left-container {
  background-color: red;
  flex: 1;
}
.fixed-container {
  flex-basis: 200px;
  background-color: yellow;
  text-align: center;
}

Demo