У меня есть 5 горизонтальных делений. Каждый div содержит три дочерних div:

  • Заголовок div
  • строка div
  • текстовый раздел

Как я могу добиться, чтобы все строки div (я имею в виду div, который создает линию между текстом заголовка и текстом содержимого) были выровнены по горизонтали? Мне нужны все горизонтальные линии div (class = "h_line") на одной горизонтальной линии.

Горизонтальные линии выделены красными стрелками.

enter image description here

См. скрипку.

Обратите внимание, что я использую 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>
0
jublikon 17 Дек 2015 в 19:46

3 ответа

Лучший ответ

Я предполагаю, что любой текст заголовка может отличаться по длине и занимать более 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>
1
LGSon 17 Дек 2015 в 17:47

Пожалуйста, попробуйте мой код JS Fiddle. Я надеюсь, что это решит вашу проблему.

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

0
Faisal Ramzan 17 Дек 2015 в 17:11

Использовать display-inline

.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>
0
Luiz Fernando Softov 17 Дек 2015 в 16:59