在不使用浮点数和宽度的情况下在同一行对齐 div [重复]答案

【问题标题】：Align divs in same line without using float and width [duplicate]在不使用浮点数和宽度的情况下在同一行对齐 div [重复]
【发布时间】：2021-10-05 17:08:27
【问题描述】：

我尝试在不使用float 和width 的情况下将 2 个 div 对齐在同一行。我正在使用下面的代码。

.first{
  color: #377fd9;
  font-size: 1.375rem;
  margin-bottom: 10px;
  margin: 15px 0px 0px 20px;
  padding-top: 35px;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}

.second{
  cursor: pointer;
  text-align: end;
  padding: 8px 0;
}

<div class="first">First</div>
<div class="second">Second</div>

【问题讨论】：

使用 flexbox 来做到这一点

标签： html css

【解决方案1】：

查看所需的布局，边框和填充是指整个事物，而不仅仅是第一个 div。

如果您将两个 div 放在一个容器中并将该样式放在容器上，您可以使用 flex 来对齐容器内的 div。

.container {
  display: flex;
  margin-bottom: 10px;
  margin: 15px 0px 0px 20px;
  padding-top: 35px;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}

.first {
  color: #377fd9;
  font-size: 1.375rem;
}

.second {
  cursor: pointer;
  text-align: end;
  padding: 8px 0;
}

.first,
.second {
  flex: 1;
}

<div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
</div>

【讨论】：

【解决方案2】：

默认情况下，Div 是块元素，不能与其他元素并排放置，但您可以通过在 CSS 中添加 display:inline-block 来更改它，就像这样

.first{
  color: #377fd9;
  font-size: 1.375rem;
  margin-bottom: 10px;
  margin: 15px 0px 0px 20px;
  padding-top: 35px;
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
  display:inline-block;
}

.second{
  cursor: pointer;
  text-align: end;
  padding: 8px 0;
  display:inline-block;
}

<div class="first">First</div>
<div class="second">Second</div>

【讨论】：

【解决方案3】：

只需将其包装在父元素中，然后使用flexbox。

如果需要，您可以使用其他样式。如果不需要div之间的空格，可以去掉分配给div的flex: 1。

.first{
  color: #377fd9;
}

.second{
  cursor: pointer;
}

section {
  display: flex;
}

div {
  flex: 1;
}

<section>
  <div class="first">First</div>
  <div class="second">Second</div>
</section>

【讨论】：

【解决方案4】：

<style>
    #main{display:grid;
        grid-template-columns:1fr 1fr;
        
      }
</style>


<div id="main">
    <div class="first">First</div>
    <div class="second">Second</div>
    </div>

【讨论】：

【解决方案5】：

您可以依靠 flex box 来执行此操作，为此您必须有一个将 display CSS 属性设置为 flex 的容器，并且所有子元素将与默认的 Flex Direction 对齐在同一行上ROW

.container {
  display: flex;
}

.container div {
  flex-grow: 1;
}

.first {
  background: #34D399;
}

.second {
 background: #1E3A8A;
}

<div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
<div>

正如您在 .container div 选择器上看到的那样，我使用 flex-grow: 1; 将所有项目设置为具有相等的宽度

【讨论】：

【解决方案6】：

您可以在布局中使用 flex。工作例如。我希望这对你有用。 https://codesandbox.io/s/quizzical-banzai-dz5sm?file=/index.html

【讨论】：