Question

我有两行像这样

<div class="container me">
    <div class="message">
    </div>

    <div class="time">
    </div>
</div>

<br />

<div class="container he">
    <div class="message">
    </div>

    <div class="time">
    </div>
</div>

这样的css

* {
  padding:0;
  margin:0;
}

.container {
  width:500px;
  height:50px;
  outline:1px solid green;
}

.message {
  width:250px;
  height:50px;
  border:1px solid red;
  display:inline-block;

  border-radius:5px;
  position: relative;
}

.time {
  width:50px;
  height:50px;
  background:orange;
}

.container.me .time {
  float:right;
}

.container.he .time {
  float:left;
}

我试图使消息块完全可能的宽度（100％减去时间块），是否可能？

jsfiddle https://jsfiddle.net/Nerfair/t0t0q632/5/

Answer 1

您可以将.message的宽度设置为width: calc(100% - 52px); - 对于.time的边框，此52px是.message div（50px）+ 2px的宽度（左右）

编辑：对于IE8支持，你不能使用它，所以你可以尝试这样棘手的事情：https://jsfiddle.net/L2pqhnsq/

全宽块附近浮动

1 个答案: