Question

我在一个父div中有两个div。如果内部的内容更长，我希望正确的div总是向右伸展并向左展开; 我希望左div填充剩余部分（内部的内容将被隐藏）

我已完成研究，但在所有类似的问题中，一个div有固定的宽度，而在我的情况下，两个都是动态的（一个基于内容，另一个基于另一个div）。

我可以使用javascript动态更改左div的宽度，但有没有一种纯CSS方式来实现它？

更新1：我们需要支持旧浏览器，因此我无法使用flexbox。

更新2：我需要的另一件事是左div中的内容应该只有一行并隐藏溢出。因此，如果我使用white-space: nowrap; overflow: hidden; text-overflow: ellipsis，则左边的div超出长度，右边的div不显示。

Answer 1

我能想到的一种方法是在子div上使用display: table-cell。请注意，即使右侧div没有固定宽度，其内容也必须如此，因此右侧div可以展开，左侧div可以占用剩余空间。

＆＃13;

.parent {
  width: 500px;
  margin-bottom: 10px;
}
.child {
  display: table-cell;
  width: 100%;
  height: 100px;
}
.left {
  background-color: rgba(255,0,0,.1);
}
.right {
  background-color: rgba(0,255,0,.1);
}

.parent:nth-child(2) .child.right p {
  width: 200px;
}
.parent:nth-child(3) .child.right p {
  width: 350px;
}

＆＃13;

<div class="parent">
  <div class="child left">
    a
  </div>
  <div class="child right">
    b
  </div>
</div>

<div class="parent">
  <div class="child left">
    a
  </div>
  <div class="child right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
  </div>
</div>

<div class="parent">
  <div class="child left">
    a
  </div>
  <div class="child right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
  </div>
</div>

<div class="parent">
  <div class="child left">
    right div content doesn't have a width
  </div>
  <div class="child right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
  </div>
</div>

＆＃13;

Answer 2

使第一个子div浮动：右边，宽度为：auto，第二个子div有一个margin-right：auto，应该这样做：

<div>
<div style="float:right;width:auto;border:1px solid;white-space: nowrap;">Something Something Something Something </div>
<div style="margin-right:auto;border:1px solid;">Something Something Something </div>
</div>

Answer 3

如果内部的内容更长，我希望正确的div总是向右伸展并向左展开;我希望左div填充剩余部分（内部的内容将被隐藏）。

我相信flexbox可以解决这个问题。

＆＃13;

.wrapper {
  width: 80%;
  display: flex;
  margin: 1em auto;
  border: 1px solid grey;
  justify-content: space-between;
  background: red;
}
.left,
.right {
  flex: 1 1 auto;
  padding: 1em;
}
.left {
  background: pink;
}
.right {
  flex: 0 1 auto;
  background: #c0ffee;
}

＆＃13;

<div class="wrapper">
  <div class="left"></div>
  <div class="right">Lorem ipsum dolor sit.</div>
</div>

<div class="wrapper">
  <div class="left"></div>
  <div class="right">Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum iusto consectetur aut explicabo, aliquam illo nihil magnam, reiciendis animi quidem provident nulla porro sed cumque!</div>
</div>

＆＃13;

在一个内部填充两个动态div

3 个答案: