HTML 无法内联读取答案

【问题标题】：HTML cannot read inlineHTML 无法内联读取
【发布时间】：2021-09-24 09:28:10
【问题描述】：

我需要一些帮助。它会继续将元素 (SEE THE LAYOUT) 显示为带有边距的块，即使边距为 0。

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;
}

【问题讨论】：

PHP 和 SQL 是什么意思？
首先，这与 PHP 完全无关。所以下次请适当地标题和标签。
第二 - 您实际上如何想要显示这个？类名建议您在这里使用 flexbox 布局模型 - 但是使用 display: inline，您会使整个事情 not flex，因此任何其他 flex 属性也不再有效果.您是否正在寻找display: inline-flex（创建一个不占用全宽但仅占用内容需要的宽度的 flex 元素）？
总而言之，我认为与其在这里问，不如现在就学习一些关于这个问题的初学者教程（我们不是来教基础知识的)。 css-tricks.com/snippets/css/a-guide-to-flexbox 应该可以让你很好地开始。
你好，它被准确地标记为 PHP，因为它是一个通过 wamp 服务器运行的 php 文件。如果我只是在 HTML 文件中查看它，那么我不会遇到这个问题。我完全能够使用所有 html 和 css 属性，我将 display: flex; 属性更改为 display:inline; 作为对我的问题的一个有希望但无用的答案。

标签： html css css-float

【解决方案1】：

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

Bootstrap 在元素上设置 display: flex，但随后您将其更改为 display: inline，因此它不再使用 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>

【讨论】：

我没有使用引导程序，因为我在 CSS 框架方面也遇到了很多问题。但我已经尝试设置dispaly:inline-flex;，但什么也没发生。
我也尝试将html 设置为inline-block 以及float:left，但什么也没有。非常感谢您的帮助！
我在答案中编辑了一个现场演示。 inline-flex 明显有效果。
虽然在 WAMP 服务器上运行，但它在 php 文件中，我相信这就是问题所在，只要我知道它是什么。如果我在浏览器中仅以 html 形式查看我的代码，那么它也可以正常工作。我已经从字面上复制粘贴了 cos 以确保我不会错过任何内容并且没有任何变化
HTML 和 CSS 是 HTML 和 CSS。如何生成它并不重要。