CSS：水平溢出元素开始新行

Question

如果您的孩子一起超过其父级的宽度，则会创建一个新的垂直线来说明该空间。但我让我的一个孩子过来了。

＆＃13;

＆＃13;

.parent {
  height: 200px;
  width: 250px;
  background-color: pink;
  margin: auto;
}

.child {
  height: 75px;
  width: 150px;
  position: relative;
  background-color: brown;
  outline: 1px solid black;
}

.child:last-of-type {
  left: -100px
}

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

任何方式我都可以让div现在在同一条线上？由于现实世界的情况，最好不要将它们设置为绝对位置，尽管我怀疑这可能是唯一的答案。

Answer 1

使用Flexbox将您的孩子div放在同一行

  

JsFiddle

  .parent {
    height: 200px;
    width: 250px;
    background-color: pink;
    margin: auto;
    display: flex;
  }
  .child {
    height: 75px;
    flex: 1 0 150px;
    background-color: brown;
    outline: 1px solid black;
  }

<强>结果

Answer 2

看看这是否适合你

CSS

.parent {
    height: 200px;
    width: 250px;
    background-color: pink;
    margin: auto;
  }
  .child {
    height: 75px;
    width: 150px;
    position: relative;
    background-color: brown;
    outline: 1px solid black;
    float: left;
  }
.last {
  width:100px;
  overflow: hidden;
}

HTML

<div class="parent">
    <div class="child"></div>
    <div class="last"><div class="child"></div></div>
  </div>

Codepen https://codepen.io/YasirKamdar/pen/qxjLNZ

Answer 3

制作div inline-block并将white-space:nowrap与父容器一起使用：

.parent {
  height: 200px;
  width: 250px;
  background-color: pink;
  margin: auto;
  white-space: nowrap;
  /*To remove whitespace*/
  font-size:0;
}

.child {
  height: 75px;
  width: 150px;
  display: inline-block;
  vertical-align:top;
  background-color: brown;
  outline: 1px solid black
  
  font-size:initial;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 4

＆＃13;

＆＃13;

.parent {
  height: 200px;
  width: 250px;
  background-color: pink;
  margin: auto;
  white-space:nowrap;
  font-size:0;
}

.child {
  height: 75px;
  width: 150px;
  position: relative;
  background-color: brown;
  outline: 1px solid black;
  display:inline-block;
  white-space:normal;
  font-size:12px; /* your original font-size*/
}

.child:last-of-type {
  left: -100px;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

由于不使用flexbox，也应该在IE8中工作。