堆棧內存溢出
  簡體   English   中英

在一條水平線上對齊div

[英]align div's on one horizontal line

 原文  2015-12-17 16:46:48  2   3    javascript/ jquery/ html/ css

問題描述

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

  • 標頭div
  • div線
  • 文字div

我如何才能實現所有的行div（我的意思是在標題文本和內容文本之間創建一條線的div）將水平對齊？ 我需要一條水平線上的所有水平線div（class =“ h_line”）。

水平線用紅色箭頭突出顯示。

在此處輸入圖片說明

見小提琴 。

請注意，我使用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>

3 個解決方案

解決方案1
 1 已采納  2015-12-17 17:04:31

我假設任何標題文本的長度和跨度可能會超過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>

解決方案2
 0  2015-12-17 16:59:03

使用內嵌顯示 

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

解決方案3
 0  2015-12-17 17:11:12

請嘗試我的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/ ）

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 對齊圖像並水平對齊div 垂直對齊div但保持水平位置不變 將div對准同一行 對齊 <td> 和 <div> 在同一行 jQuery的水平居中的div的 如何對齊DIV的內聯？ 如何將下拉菜單從垂直線對齊到水平線？ div中具有表單元格屬性的水平對齊鏈接 垂直和水平對齊div內的所有內容和元素 如何在div中的指定高度上添加水平線？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM