CSS 对齐彼此相邻的框

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

您可以使用 "display:inline-block" 而不是 float:left，这会将 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 中你可以设置宽度或 flex-basis

CSS 对齐彼此相邻的框

CSS aligning boxes next to each other

css

wordpress

wpbakery