水平对齐 2 个同名的类答案

【问题标题】：Align 2 classes with the same name horizontally水平对齐 2 个同名的类
【发布时间】：2019-08-26 13:11:49
【问题描述】：

在学习 MIMO HTML 课程时，我遇到了一个问题，即我无法让具有 class="column" 属性的两个元素与 display: inline-block; 水平对齐

我已经尝试过 float:right 和其他属性来让它们对齐，但是有些东西阻止了这种情况的发生

.column {
  min-width: 300px; /*DOES NOT WORK*/
  display: inline-block; /*DOES NOT WORK*/
  vertical-align: top; /*DOES NOT WORK*/
}

<div id="footer">
  <!--Footer-->
  <div class="container">
    <div class="column">
      <h4>My Links
        <!--My Links Header-->
      </h4>
      <p>
        <a href="https://soundcloud.com/discover">Soundcloud <!--Link-->
                </a>
        <br>
        <a href="https://www.youtube.com">Youtube <!--Link-->
                </a>
      </p </div>
      <div class="column">
        <!--My Story Header-->
        <h4>My Story
        </h4>
        <p>Hey there! I'm aspiring music website creator!
        </p>
      </div>
    </div>
  </div>

display: inline-block; 应该根据 MIMO 将元素并排放置，但这不会发生

【问题讨论】：

你需要关闭p标签。否则下一列将成为嵌套列。

标签： html css class

【解决方案1】：

您可以将其浮动到左侧。你这里还有一个错误的结束标签...... </p </div>

.column {
  min-width: 300px;
  display: inline-block;
  vertical-align: top;
  float: left;
}

<div id="footer">
  <!--Footer-->
  <div class="container">
    <div class="column">
      <h4>My Links
        <!--My Links Header-->
      </h4>
      <p>
        <a href="https://soundcloud.com/discover">Soundcloud <!--Link--></a>
        <br>
        <a href="https://www.youtube.com">Youtube <!--Link--></a>
      </p>
      </div>
      <div class="column">
        <!--My Story Header-->
        <h4>My Story
        </h4>
        <p>Hey there! I'm aspiring music website creator!
        </p>
      </div>
    </div>
  </div>

【讨论】：

您可以通过关闭第一列中的<p>标签来避免使用float，它会按预期工作。

【解决方案2】：

删除 HTML 中损坏的 </p。并将float: left; 添加到column 类中。

【讨论】：

【解决方案3】：

你可以使用这个例子：

.column {
  min-width: 300px; /*DOES NOT WORK*/
display: inline-block; /*DOES NOT WORK*/
vertical-align: top; /*DOES NOT WORK*/
}

<div id="footer">
  <!--Footer-->
  <div class="container">
  
    <div class="column">
      <h4>My Links
        <!--My Links Header-->
      </h4>
      <p>
        <a href="https://soundcloud.com/discover">Soundcloud <!--Link-->
                </a>
        <br>
        <a href="https://www.youtube.com">Youtube</a>
      </p>
      </div>
      
      <div class="column">
        <!--My Story Header-->
        <h4>My Story
        </h4>
        <p>Hey there! I'm aspiring music website creator!
        </p>
      </div>
      
    </div>
  </div>

【讨论】：

【解决方案4】：

考虑使用flex。在您的情况下，您需要将显示设置为 flex 到 .container：

.container{
  display: flex;
}

如果您希望两个孩子的宽度相同，您只需将flex: 1 添加到他们的 CSS 属性中即可。

您可以检查以下sn-p。

.container{
  display: flex;
}

.column{
  flex: 1;
}

<div id="footer">
  <!--Footer-->
  <div class="container">
  
    <div class="column">
      <h4>My Links
        <!--My Links Header-->
      </h4>
      <p>
        <a href="https://soundcloud.com/discover">Soundcloud <!--Link-->
                </a>
        <br>
        <a href="https://www.youtube.com">Youtube</a>
      </p>
      </div>
      
      <div class="column">
        <!--My Story Header-->
        <h4>My Story
        </h4>
        <p>Hey there! I'm aspiring music website creator!
        </p>
      </div>
      
    </div>
  </div>

【讨论】：