在不修改 HTML 的情况下将两个 div 对齐在同一行 [重复]答案

【问题标题】：Align two divs on the same line without modifying the HTML [duplicate]在不修改 HTML 的情况下将两个 div 对齐在同一行 [重复]
【发布时间】：2020-08-25 12:35:44
【问题描述】：

将这两个div 对齐在同一行的最佳方法是什么？

<div class="main_one">
  <div class="number_one">Title A</div>
</div>
<div class="main_two">
  <div class="number_two">Title B</div>
</div>
<div class="main_three">
  <div class="number_three">Title C</div>
</div>
<div class="main_four">
  <div class="number_four">Title D</div>
</div>

目前我在Title B 的顶部有Title A 从上到下查看页面。

我的目标是让标题 A 和标题 B 在同一行对齐不使用 HTML 和 不移动 main_three 和 main_four 的结构。

根据我的结构方式，我只能使用 css 来实现该目标。

任何帮助将不胜感激。

【问题讨论】：

标签： css angularjs reactjs twitter-bootstrap sass

【解决方案1】：

<div class="main_one">
    <div class="number one">Title A</div>
</div>
<div class="main_two">
    <div class="number two">Title B</div>
</div>

<div class="main_three">
    <div class="number one">Title C</div>
</div>
<div class="main_four">
    <div class="number two">Title D</div>
</div>

<style type="text/css">
    .main_one{
        float:left;
    }

    .main_two{
        float:left;
    }

    .main_three{
        clear:both;
        float:left;
    }

    .main_four{
        float:left;
    }
</style>

【讨论】：

谢谢你，克里斯。您的解决方案有效，但我忘了包括另外两个 div。基本上发生的事情是我按照你的建议进行了更改，div main_three 和div main_four 现在受到威胁。我已经更新了我上面的帖子......main three 和 main_four 不应该移动。我很想听听你的意见
你可以做 clear:both;使用 main_three 时。我会把答案放在上面的代码中。
hum 显然 clear:both 不是解决方案。这两个 div 不再正确对齐。这可能是因为这里使用了不同的 css，我无法复制/粘贴它们，因为它很长。
约翰，我做了一个截图，向你展示它是如何在一个新的 html 文档中为我对齐的。没有什么漂亮的，但 A & B 并排，并且在新线上 C & D 低于 A & B ， C & D 也并排。也许在 Chrome 中尝试隐身模式，以确保在使用 clear:both 时不会缓存任何内容；
是的，我可以看到截图......所以问题是这里的css的结构，我会弄清楚的。感谢您的帮助。

【解决方案2】：

如果您在两者的父母中没有其他孩子：

<body>
  <div class="main_one">
    <div class="number one">Title A</div>
  </div>
  <div class="main_two">
    <div class="number two">Title B</div>
  </div>
</body>

你可以使用Flexbox

body {
  display: flex;
}

编辑：

在同一行中仅对齐四个框中的两个我认为inline 将是正确的选择：

.main_one, .main_two {
  display: inline; /* or */
  display: inline-block
}

【讨论】：

感谢您的反馈，我忘了提到另外两个divs，我已经更新了我上面的帖子......main three 和main_four 不应该移动。请让我知道你的想法。
flex 已应用于您在代码库中称为主体的div container，但它不起作用。

【解决方案3】：

一种方法是像这样将display 属性设置为inline

.main_one, .main_two,
.number_one, .number_two {
  display: inline;
}

甚至更短，更有创意，像这样，这将内联所有内容。

body * {
  display: inline;
}

编辑：以下内容不再是这种情况。

附带说明 - 您缺少一个 div 上的右方括号标记

<div class="main_one">
  <div class="number one">Title A</div>
</div>
<div class="main_two">
  <div class="number two">Title B</div <------------ HERE
</div>

【讨论】：

感谢您的反馈，我忘了提到另外两个divs，我已经更新了我上面的帖子......main three 和main_four 不应该移动。请让我知道你的想法。
我更新了我的答案。另外，您现在缺少此 div 的结束 div :) <div class="main_two">

【解决方案4】：

正如其他答案所指出的，身体上的flex 工作正常，或者floats。

或者你可以使用inline-block

.main_one,
.main_two {
  display: inline-block;
}

  <div class="main_one">
    <div class="number one">Title A</div>
  </div>
  <div class="main_two">
    <div class="number two">Title B</div>
  </div>

【讨论】：

感谢您的反馈，我忘了提到另外两个divs，我已经更新了我上面的帖子......main three 和main_four 不应该移动。请让我知道你的想法。
即使您有第三个和四个 div，这仍然可以工作，因为它们将自动成为块级元素。