Question

我有两个div元素并排坐着。我希望左边的div占用右边div宽度的剩余空间。

＆＃13;

.text {
  display: inline;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-color: red;
}

.icon {
  display: inline-block;
  width: 92px;
  background-color: green;
}

.information {
  width: 200px;
}

＆＃13;

<div class="information">
  <div class="text">Text Here</div>
  <div class="icon">Image Here</div>
</div>

＆＃13;

我尝试的所有内容都会导致图标div根据文本中剩余的剩余空间调整大小/溢出。

但是如果icon div上的宽度更大，我希望我的文本div溢出。反正有吗？

我无法设置宽度（使用less或calc（totalWidth - iconWidth））对于文本div，因为图标div的宽度可能会有所不同，我不知道它的值是什么（图标的宽度值是在mixin中计算的）。

小提琴链接：https://jsfiddle.net/fdur0wd1/

Answer 1

在父级上使用flex，并将.text设置为flex-grow: 1（或简称为flex: 1 0 0）

.text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: red;
    flex: 1 0 0;
}

.icon {
    width: 92px;
    background-color: green;
}

.information {
    width: 200px;
    display: flex;
}

<div class="information">
    <div class="text">Text Here</div>
    <div class="icon">Image Here</div>
</div>

导致第一个div基于第二个div

1 个答案: