Question

我正在尝试使用某些CSS样式对wordpress（wpbakery）进行一些更改。但是我没有得到预期的结果。

我只是想显示一些带有文本的框，如下所示：

<div style="float: left;">Test</div>
<div style="float: left;">This is a longer test. This is a longer test. This is a longer test.</div>

我希望这两个盒子彼此相邻。但是，如果第二个框中的文本为两个长，则这些框将转到下一行。

我用以下方法重现了问题

 <div style="margin: auto; width: 200px;">
 <div style="float: left;">Test</div>
 <div style="float: left;">This is a longer test. This is a longer test. This is a longer test.</div>
 </div>

是否可以解决此问题？设置宽度不是我的选择。

谢谢。

Answer 1

您应该阅读Flexbox。这将使您的生活更轻松：在flexbox中，就像

.main-container: {
   display: flex;
   flex-direction: column;
 }

Answer 2

除了使用float：left之外，还可以使用：“ display：inline-block”，这将使div彼此相邻。我还建议您在div的每一侧都放一些填充物。

您可以在这里看到您的工作代码，这是我发现的最干净的方法：

.nextto{
  display: inline-block;
  width: 30%;
}

<div style="width:100%">
 <div class="nextto">Test</div>
 <div class="nextto">This is a longer test. This is a longer test. This is a longer test.</div>
 </div>

Answer 3

尝试使用flexboxes

 <div style="display: flex; flex-direction: row; justify-content: space-between">
    <div>Test</div>
    <div>This is a longer test. This is a longer test. This is a longer test.</div>
 </div>

在子div内，您可以设置宽度或弹性基础

CSS对齐框彼此相邻

3 个答案: