Question

我有一个小提琴，请在这里查看：https://jsfiddle.net/p2oe6s7w/

我需要绿色框水平拉伸，并从黄色框中获取具有固定宽度的所有剩余空间。我只能设置绿色框，说宽度的90％，我不喜欢，因为它总是不同的 - https://jsfiddle.net/p2oe6s7w/1/。我只是希望这两个街区并排。

.left {
  background: green;
  border: 1px solid blue;
  float: left;
  width: 90%;

}
.right {
  background: yellow;
  width: 60px;
  border: 1px solid red;
  float: left;
}

<div class="container">
  <div class="left">
    <pre>
      dkdkdkd
      dkdkdkdkd
      fjfjf

      fjfjfj
    </pre>
  </div>
  <div class="right">
    <button>
    dfdf
    </button>
  </div>
</div>

另一件需要知道的是，有一个垂直设置的容器列表。所以我不认为绝对的立场会起作用。

纯粹的css请。

Answer 1

只需使用这样的flex：

.container {
  display: flex;
  align-items: flex-start;
}

.left {
  background: green;
  border: 1px solid blue;
  flex: 1; /* This will make your element fill the remaining space*/
}

.right {
  background: yellow;
  width: 60px;
  border: 1px solid red;
}

<div class="container">
  <div class="left">
    <pre>
      dkdkdkd
      dkdkdkdkd
      fjfjf
      
      fjfjfj
    </pre>
  </div>
  <div class="right">
    <button>
    dfdf
    </button>
  </div>
</div>

Answer 2

您可以使用此CSS：

arecord

基本行是alsamixer，即全宽减去黄色DIV的宽度，但你还需要其他东西（html, body { margin: 0; } * { box-sizing: border-box; } .left { background: green; border: 1px solid blue; float: left; width: calc(100% - 60px); } .right { background: yellow; width: 60px; border: 1px solid red; float: left; }等）来使一切都适合。

https://jsfiddle.net/mLkjv565/1/

Answer 3

使用以下css

.left {
  background: green;
  border: 1px solid blue;
  float: left;
  width: calc(100% - 60px);

}
.right {
  background: yellow;
  width: auto;
  border: 1px solid red;
  float: left;
}

请在这里查看。 fiddle

如何在2个div的容器中拉伸div？

3 个答案: