Question

这是一个非常简单的CSS问题。

我在这里发布了我的代码。 http://jsbin.com/furafi/1/edit

如何将所有子div与父div的基线对齐？现在，它与＆＃34; topline＆＃34;。

保持一致

感谢您的任何建议。

Answer 1

试试这个css：

.valign.bottom { 
    vertical-align: bottom;
}


.block { padding: 20px; display: inline-block}

.block.red {background: red; width:50px;}

.block.yellow {background: yellow;  width:50px;}

.block.green {background: green;  width:100px;}

问题是float: left打破了显示流程

Answer 2

我发现display: table和display:table-cell是垂直对齐div时最好的方法。我有example plunker here

<强> HTML

<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="myTable">
      <div class="myCell">
        <div class="bblock red">my bottom aligned div 1</div>
        <div class="bblock yellow">my bottom aligned div 2</div>
        <div class="bblock green">my bottom aligned div 3</div>
      </div>
    </div>
    <br/>
    <div class="myTable">
      <div class="myCell">
        <div class="mblock red">my middle aligned div 1</div>
        <div class="mblock yellow">my middle aligned div 2</div>
        <div class="mblock green">my middle aligned div 3</div>
      </div>
    </div>
    <br/>
    <div class="myTable">
      <div class="myCell">
        <div class="tblock red">my top aligned div 1</div>
        <div class="tblock yellow">my top aligned div 2</div>
        <div class="tblock green">my top aligned div 3</div>
      </div>
    </div>
  </body>
</html>

CSS

.myTable { 
  display:table;
  background-color:blue;
}

.myCell { 
  display:table-cell; 
}

.bblock {
  padding:20px;
  display:inline-block;
  vertical-align: bottom; 
}

.mblock {
  padding:20px;
  display:inline-block;
  vertical-align: middle; 
}

.tblock {
  padding:20px;
  display:inline-block;
  vertical-align: top; 
}

.red { 
  background-color: red; 
  width:50px;
}

.yellow {
   background-color: yellow;  
}

.green {
  background-color: green;  
  width:100px;
}

Answer 3

更改

float: left;

到

display: inline-block;

float将它们视为全部内联，但inline-block充分利用了这两个世界。另外，删除vertical-align行。这可能是the most misused property in CSS。

要修复框之间的间距，请确保标记本身中的div之间没有任何空格。

Answer 4

您可以在父div中使用display: flex;来获得您想要的内容。在这里查找文档：CSS display Property。

小心，因为它仅在CSS3中受支持。

将子div与父div的基线对齐

4 个答案: