0

我正在尝试使用一些 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>

有没有办法解决这个问题？设置宽度不是我的选择。

提前致谢。

4

3 回答 3

1

您应该阅读Flexbox。它会让你的生活更轻松：在 flexbox 中就像

.main-container: {
   display: flex;
   flex-direction: column;
 }
于 2019-10-20T19:34:55.803 回答
1

您可以使用：“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>

于 2019-10-20T19:34:59.023 回答
1

尝试使用弹性盒

 <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

于 2019-10-20T19:37:32.170 回答