Question

我刚刚开始编写代码，它是一个小项目，它是一个基于php和html的网络工具。我开始使用flexbox来更好地控制我网站上的代码片段。我从我的数据库中取一些东西并列出它们，如下例所示。我必须使用PHP，因为实际内容包含各种php部分来实现数据库中的数据。

//this is just an example, which when run, will show the problem...
//php part
echo "<div class='shell'>";
echo "<div class='shell a'>Headline<br> Something <br> another thing 
      <br> a third thing </div>";
echo "<div class='shell b'><b>Headline</b><br> Something <br> another thing 
      <br> a third thing </div>";
echo "<div class='shell c'><p><b>Headline</b><br> Something <br> another 
      thing <br> a third thing </p></div>";
echo "</div>";

//css part
.shell {display:flex; margin:auto; height:auto; width:600px; border: 1px 
solid black;justify-content:center;}
.a {width:auto;}
.b {width:auto;}
.c {width:auto;}

我想使用（shell b）我的盒子，因为没有（p）文本格式化框只会在我的实际文本周围，例子（shell c）将使用文本上方和下方的空格，边框将显示这个。（Shell a）是用大胆的标题来展示它应该如何看待，以及我想要（shell b）看起来如何。问题是，如果我将任何类型的任何东西格式化而不将其包装在（p）中，它将得到它自己的＆＃34; row＆＃34;以下文字不会直接在其下方列出。这是一个已知问题，是否有解决方案？我希望我能解释一下，这样有人可以理解。提前谢谢。

编辑：我添加了一张图片，因此无需在某处运行代码即可看到问题。 result of the code

Answer 1

当您在所有dispay: flex上使用shell时，它将如下所示

＆＃13;

.shell {
  display: flex;
  margin: auto;
  height: auto;
  width: 600px;
  border: 1px solid black;
  justify-content: center;
}

＆＃13;

<div class='shell'>
  <div class='shell a'>Headline<br> Something <br> another thing
    <br> a third thing </div>
  <div class='shell b'><b>Headline</b><br> Something <br> another thing
    <br> a third thing </div>
  <div class='shell c'>
    <p><b>Headline</b><br> Something <br> another thing <br> a third thing </p>
  </div>
</div>

＆＃13;

第二项的原因是<b></b>标签，它将被视为弹性项目，并与文本（匿名弹性项目）一起使用，它们将一对一地呈现侧的。

第3项通过包装器p来解决这个问题。

如果您只在外部display: flex上设置div，那么它可能会显示您的期望

＆＃13;

.shell.flex {
  display: flex;
  margin: auto;
  height: auto;
  width: 600px;
  justify-content: center;
}

.shell {
  border: 1px solid black;
}

＆＃13;

<div class='shell flex'>
  <div class='shell a'>Headline<br> Something <br> another thing
    <br> a third thing </div>
  <div class='shell b'><b>Headline</b><br> Something <br> another thing
    <br> a third thing </div>
  <div class='shell c'>
    <p><b>Headline</b><br> Something <br> another thing <br> a third thing </p>
  </div>
</div>

＆＃13;

注意，我没有使用a / b / c类，因为width: auto是默认

使用flexbox

1 个答案: