Question

所以我有一个问题。

我有两个div，它们应该是一个接一个。

它们都包含有一些max-width : n的div。

我将width: 70%放到第一个div，将width: 30%放到第二个div。我希望他们填补100％的父div。而是第二个div打破了新的界限。

这是一个jsfiddle示例。

https://jsfiddle.net/u5aqhvmj/

编辑：请大家，我正在努力解决这个问题。我知道我可以使用花车，但这不是讨论的一部分。

Answer 1

尝试在两个div上设置 float：left

更新

在你的HTML中你有空格字符占用空间！所以你有空白字符占用30％+ 70％以上的空间 - ＆gt; ＆gt;导致换行的100％

如果你在一行中写下所有div，而你的小提琴中没有空格

<div class="firstQ"></div><div class="secondQ"></div>

不会成为换行符

Answer 2

如果没有inline-block 4px重置黑客，您可以使用flexbox执行此操作：

.outer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 400px;   
}

.first,
.second {
  height: 100px;
}

.first {
  background: red;
  -webkit-flex: 1 1 70%;
  -ms-flex: 1 1 70%;
  flex: 1 1 70%;
}
.second {
  background: blue;
  -webkit-flex: 1 1 30%;
  -ms-flex: 1 1 30%;
  flex: 1 1 30%;
}

<div class="outer">
    <div class="first">
    </div>
    <div class="second">
    </div>
</div>

即使宽度不是100％，Div也会进入新行

2 个答案: