将 div 对齐在一条水平线上

Question

我有 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>

Answer 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>

Answer 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>

Answer 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/)