Question

如何对两个div进行样式设置：

他们是并排的
右侧div扩展以适合其内容
左边的div扩展到适合右边div左边的空格，但当它填满div时，其内容会被包裹。

使用以下表格可以实现效果：

bundle = [NSBundle bundleForClass:[self class]];
className = NSStringFromClass([self class]);
self.view = [[bundle loadNibNamed:className owner:self options:nil] firstObject];

和

<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>

在下面的div解决方案中，如果内容没有强制它，则左边的div不会填充空格。当内容扩展时，左边的div将出现在右上方。

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

和

<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 1

我想你想要flexbox

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: