堆栈内存溢出
  繁体   English   中英

在一条水平线上对齐div

[英]align div's on one horizontal line

 原文  2015-12-17 16:46:48  8   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