将 div 对齐在一条水平线上

Posted 2023-02-24

技术标签:

【中文标题】将 div 对齐在一条水平线上【英文标题】：align div's on one horizontal line 【发布时间】：2016-03-24 05:44:05 【问题描述】：

我有 5 个水平 div。每个 div 包含三个子 div：

标题 div 行 div 文本 div

如何实现所有行 div（我的意思是在标题文本和内容文本之间创建一条线的 div）将水平对齐？我需要一条水平线上的所有水平线 div (class="h_line")。

水平线用红色箭头突出显示。

请参阅fiddle。

请注意，我使用的是bigtext。该库将文本集中在其 div 中。

html

<div class="ThirdSectionTextArea">

              <div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell1">
              </div>
              <div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell2">
                  <span class="bigtext">  
                  <div class="header_allroundservice leftalign">
                      HEADER 
                  </div>
                    <div class="h_line"></div>
                  <div class="leftalign">
                        SOME Content
                  </div>
                  </span>
              </div>
              <div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell3">
                  <span class="bigtext">
                    <div class="leftalign uppercase">
                        HEADER 
                    </div>
                     <div class="h_line"></div>
                    <div class="leftalign">
                        SOME Content
                    </div>
                </span>
              </div>
              <div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell4">
                <span class="bigtext">
                  <div class="leftalign uppercase">
                       HEADER
                  </div>
                  <div class="h_line"></div>
                  <div class="leftalign">
                       SOME CONTENT
                  </div>
                </span>
              </div>
              <div class="ThirdSectionTextAreaCell ThirdSectionTextAreaCell5">
              </div>

【问题讨论】：

你能添加一些代码吗？我已经编辑了我的帖子。说任何标题文本的长度各不相同，跨越超过 1 行，有些只有 1 行，对吗？ ...如果是，请检查我的答案，因为它确实如此。 【参考方案1】：

使用显示内联

.parent 
    display: flex;

.block 
  margin: 0px;
  background-color: #84c300;
  display: inline-block;
  width: 20%;

.block .title 
  padding: 5px;


.block .text 
  padding: 5px;

<div class="parent">
  <div class="block">
    <div class="title">title</div>
    <hr />
    <div class="text">text</div>
  </div>
  <div class="block">
    <div class="title">title</div>
    <hr />
    <div class="text">text</div>
  </div>
  <div class="block">
    <div class="title">title</div>
    <hr />
    <div class="text">text</div>
  </div>
  <div class="block">
    <div class="title">title</div>
    <hr />
    <div class="text">text</div>
  </div>
  <div class="block">
    <div class="title">title</div>
    <hr />
    <div class="text">text</div>
  </div>
</div>

【讨论】：

【参考方案2】：

我假设任何标题文本的长度都可以变化并且跨越超过 1 行，而有些标题文本只有 1 行，对吗？

在这种情况下，如果您希望行动态调整，则需要行，如下例所示。如果没有，您需要在标题上设置固定高度。

table, body 
  background-color: #ccc;  

.table 
  display: table;
  width: 100%;

.row 
  display: table-row;

.cell 
  display: table-cell;
  width: 33%;
  padding-left: 2%;
  padding-right: 2%;

.cell:nth-child(1) 
  background-color: orange;
  border-right: 5px solid #ccc;

.cell:nth-child(2) 
  background-color: yellow;
  border-left: 5px solid #ccc;
  border-right: 5px solid #ccc;

.cell:nth-child(3) 
  background-color: lime;
  border-left: 5px solid #ccc;

.inner 
  max-height: 100px;
  overflow: auto;

<div class="table">
  <div class="row">
    <div class="cell">
      First
    </div>
    <div class="cell">
      Second<br>
      2 lines
    </div>
    <div class="cell">
      Third
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <hr />
    </div>
    <div class="cell">
      <hr />
    </div>
    <div class="cell">
      <hr />
    </div>
  </div>
  <div class="row">
    <div class="cell">
      <div class="inner">
        First
      </div>
    </div>
    <div class="cell">
      <div class="inner">
        Second<br>
        2 lines
      </div>
    </div>
    <div class="cell">
      <div class="inner">
        Third<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
        with many lines<br>
      </div>
    </div>
  </div>
</div>

【讨论】：

您将所有 div 设置为表格元素。我不能直接使用html表吗？并使用表格：当我想使用大文本库将文本放入其父 div 时，这不是问题吗？因为即使设置了固定大小，表格似乎也会因某种原因而扩展...... @jublikon 我更新了如何在使用 display:table 时解决最大高度问题，我在其中添加了一个内部 div 来解决问题，因为表格单元格不响应最大高度。当谈到使用表格标签时，这个技巧主要是让你的标题占据相同的空间，尽管有很多行，你不应该开始使用表格标签。这也可以使用普通的 div 来实现，尽管这样的代码结构要干净得多。【参考方案3】：

请试试我的 JS 小提琴代码。我希望这能解决你的问题。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box-1 
    width:25%;
    float:left;
    text-align:center;

.box-1:first-child 
    background: red;

.box-1:nth-child(2) 
    background: green;

.box-1:nth-child(3) 
    background: brown;

.box-1:nth-child(4) 
    background: orange;

.heading 
    min-height:40px;
    border-bottom: 1px solid #fff;

.heading h1 
    color:#fff;
    font-size:11px;

.text p
    color:#fff;
    font-size:10px;

</style>
</head>
<body>
<div class="box-1">
    <div class="heading">
        <h1>
            SOFTWARE- UND <br> DATENBANKENTWICKLUNG 
        </h1>
    </div>
    <div class="text">
        <p>
            Unsere Kernkompetenz liegt im Bereich Softwareentwicklung 
            und Datenbank- programmierung. Hierbei legen wir den Focus 
            auf die Steigerung der Effizienz und  Transparenz Ihrer 
            Geschäftsprozesse. Wir stecken viel Know-how in eine 
            einfache  Bedienbarkeit der Software – selbst wenn komplexe 
            Vorgänge abgebildet werden. Denn Sie sollen Ihre Software 
            schließlich intuitiv bedienen können, nicht wir.
        </p>
    </div>
</div>
<div class="box-1">
    <div class="heading">
        <h1>
            SOFTWARE- UND <br> DATENBANKENTWICKLUNG 
        </h1>
    </div>
    <div class="text">
        <p>
            Unsere Kernkompetenz liegt im Bereich Softwareentwicklung 
            und Datenbank- programmierung. Hierbei legen wir den Focus 
            auf die Steigerung der Effizienz und  Transparenz Ihrer 
            Geschäftsprozesse. Wir stecken viel Know-how in eine 
            einfache  Bedienbarkeit der Software – selbst wenn komplexe 
            Vorgänge abgebildet werden. Denn Sie sollen Ihre Software 
            schließlich intuitiv bedienen können, nicht wir.
        </p>
    </div>
</div>
<div class="box-1">
    <div class="heading">
        <h1>
            SOFTWARE- UND <br> DATENBANKENTWICKLUNG 
        </h1>
    </div>
    <div class="text">
        <p>
            Unsere Kernkompetenz liegt im Bereich Softwareentwicklung 
            und Datenbank- programmierung. Hierbei legen wir den Focus 
            auf die Steigerung der Effizienz und  Transparenz Ihrer 
            Geschäftsprozesse. Wir stecken viel Know-how in eine 
            einfache  Bedienbarkeit der Software – selbst wenn komplexe 
            Vorgänge abgebildet werden. Denn Sie sollen Ihre Software 
            schließlich intuitiv bedienen können, nicht wir.
        </p>
    </div>
</div>
<div class="box-1">
    <div class="heading">
        <h1>
            SOFTWARE- UND <br> DATENBANKENTWICKLUNG 
        </h1>
    </div>
    <div class="text">
        <p>
            Unsere Kernkompetenz liegt im Bereich Softwareentwicklung 
            und Datenbank- programmierung. Hierbei legen wir den Focus 
            auf die Steigerung der Effizienz und  Transparenz Ihrer 
            Geschäftsprozesse. Wir stecken viel Know-how in eine 
            einfache  Bedienbarkeit der Software – selbst wenn komplexe 
            Vorgänge abgebildet werden. Denn Sie sollen Ihre Software 
            schließlich intuitiv bedienen können, nicht wir.
        </p>
    </div>
</div>
</body>
</html>

Float divs with same heading height(https://jsfiddle.net/ua7hmwsn/)

【讨论】：

感谢您的回复。当我在小提琴的标题中添加一些文本时，水平分隔线（“h_line”）线低于其他水平分隔线（“h_line”）

以上是关于将 div 对齐在一条水平线上的主要内容，如果未能解决你的问题，请参考以下文章

左对齐内容并自动调整 div

将多个 div 对齐一行并将文本垂直和水平居中

phpstorm 设置花括号对齐方式（在一条竖线上）

如何将ul水平对齐到div的中心？

水平和垂直对齐 Div [重复]

有没有更好的方法在水平轴上底部对齐 flex-box div？