我怎样才能得到一个 div 来增加高度而不是先跳到我的左浮动 div 下面然后再增加高度？

Question

我在一个容器中内联了两个 div，左边一个应该是固定大小，右边一个应该使用剩余的宽度。如果右边的包含少量文本，则效果很好，如果包含更多文本，我希望它在高度上扩展。如果文本太多，右边的会先跳到左边的下面，然后在高度上扩展。

简而言之：我希望两个元素始终位于同一行，无论右侧元素中有多少文本

代码如下，fiddle 此处：https://jsfiddle.net/t4dg95ov/

我think/hope只是遗漏了一些琐碎的东西，但我找不到。

.container {
  background-color: purple;
}

.left-element {
  min-height: 113px;
  width: 85px;
  float: left;
  display: inline-block;
  background-color: green;
}

.right-element {
  margin-top: 0px;
  min-height: 113px;
  width: auto;
  display: inline-block;
  background-color: blue;
}

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

Answer 1

你可以试试 flexbox，而不是浮动：

.container {
  display: flex;
  flex-direction: row;
  background-color: purple;
}

.left-element {
  flex: 0 0 85px;
  background-color: green;
}

.right-element {
  background-color: blue;
}

<div class="container">
  <div class="left-element">
    Lorem ipsum dolor sit a
  </div>
  <div class="right-element">
    ore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
  </div>
</div>

编辑：如果你必须使用浮动，可以像这样设置右侧的最大宽度 div：

max-width: calc(100% - 85px);

Answer 2

您可以给出百分比，而不是给出固定宽度。以下解决方案可以正常工作。

.container {
  background-color: purple;
}

.left-element {
  min-height: 113px;
  width: 12%;
  float: left;
  display: inline-block;
  background-color: green;
}

.right-element {
  margin-top: 0px;
  min-height: 113px;
  width: 88%;
  display: inline-block;
  background-color: blue;
}

<div class="container">
  <div class="left-element">
    Lorem ipsum dolor sit a
  </div>
  <div class="right-element">
    ore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
  </div>
</div>

Answer 3

您也可以选择 css 网格。你可以这样实现它：

.container { 
display: grid; 
grid-template-columns: 85px 1fr; 
grid-template-rows: 1fr; 
grid-column-gap: 0px;
grid-row-gap: 0px; 
background-color: purple;
}
.left-element {
  min-height: 113px;
  background-color: green;
}

.right-element {
  margin-top: 0px;
  background-color: blue;
}

<div class="container">
  <div class="left-element">
    Lorem ipsum dolor sit a
  </div>
  <div class="right-element">
    ore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
  </div>
</div>

您甚至可以在此处轻松自定义或调整：https://cssgrid-generator.netlify.com/

如果你想坚持一些东西"traditional"你也可以考虑无边框table。像这样：

.container {
  background-color: purple;
  border: none;
  border-collapse: collapse;
}

.left-element {
  min-height: 113px;
  vertical-align:top;
  width: 85px;
  background-color: green;
  border: 0px;
}

.right-element {
  vertical-align:top;
  min-height: 113px;
  width: auto;
  background-color: blue;
  border:0px;
}

<table class="container">
<tr>
  <td class="left-element">
    Lorem ipsum dolor sit a
  </td>
  <td class="right-element">
    ore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
  </td>
  </tr>
</table>

我怎样才能得到一个 div 来增加高度而不是先跳到我的左浮动 div 下面然后再增加高度？

How can I get a div to increase height instead of jumping below my left floating div first and then increasing height?

css

css-float