如何设置并排可缩放 div 的样式

Question

如何设置两个 div 的样式以便：

他们并排
右侧 div 展开以适应其内容
左侧 div 扩展以适应右侧 div 左侧的 space，但是当它填充 div.

可以用这样的表格实现效果：

<table class="container">
    <tr>
        <td class="max">
            some text that we want to wrap within the div
        </td>
        <td class="min">
            some other text
        </td>
</table>

和

.container {
    width: 100%;
}
td.min {
    width: 1%;
    white-space: nowrap;
    border:1px solid blue;
}
td.max {
    border:1px solid red;
}

在以下带有 divs 的解决方案中，如果内容不强制，则左侧 div 不会填充 space；当内容展开时，左边的 div 会出现在右边的上方。

<div id="container">
    <div id="left">some text that we want to wrap within the div</div>
    <div id="right">some other text</div>
</div>

和

#container {
    width: 100%;
}
#left {
    float:left;
    border: 1px solid red;
}
#right {
    float:right;
    border: 1px solid blue;
}

Answer 1

我想你想要 flexbox

#container {
  width: 50%;
  margin: 1em auto;
  display: flex;
}
#left {
  background: lightblue;
  flex: 1;
}
#right {
  background: lightgreen;
}

<div id="container">
  <div id="left">some text that we want to wrap within the div</div>
  <div id="right">some other text</div>
</div>

Answer 2

你可以使用 flexbox：

.container {
  display: flex;
  width: 20%;
}

.right {
  white-space: nowrap;
}

<div class="container">
  <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum odit saepe eius quisquam! Adipisci obcaecati quia sit eaque quo provident, corrupti iure nisi consequuntur, vero nulla molestias, placeat esse ut!</div>
  <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ullam facilis blanditiis, necessitatibus nihil dicta cupiditate cum vero quod ipsam, nulla minus maxime asperiores natus reprehenderit eaque error ab porro?</div>
</div>

如何设置并排可缩放 div 的样式

How to style side-by-side scalable divs

html

css

css-float