HTML无法内联读取

Question

我需要一些帮助。即使页边空白为0，它也会将元素(SEE the LAYOUT(显示为块，并留有一个满的页边空白。

HTML:

<div class="flex cols-2">
<div style="width: 100px; height: 100px; background:blue;"></div>
<p>hello</p>
<div style="width: 100px; height: 100px; background:gold;"></div>
</div>

CSS：

/*----FLEX----*/
.flex {
display: inline;
}
.cols-2 {
flex-direction: row;
flex-basis: 49%;
}
/*----FLOAT----*/
div {
float: left;
}

Answer 1

我讨厌Bootstrap的原因之一是它需要人们学习很多自定义类名，而不是CSS。它对你隐藏CSS。

Bootstrap正在元素上设置display: flex，但随后您将其更改为display: inline，这样它就不再使用flexbox了。

对于内联flexbox元素，将其设置为display: inline-flex。

.flex {
display: inline-flex;
}
.cols-2 {
flex-direction: row;
flex-basis: 49%;
}

<p>With inline-flex</p>
<div class="flex cols-2">
<div style="width: 100px; height: 100px; background:blue;"></div>
<p>hello</p>
<div style="width: 100px; height: 100px; background:gold;"></div>
</div>
<hr>
<p>Without flex</p>
<div class="cols-2">
<div style="width: 100px; height: 100px; background:blue;"></div>
<p>hello</p>
<div style="width: 100px; height: 100px; background:gold;"></div>
</div>