Question

我有3列布局。我的问题是第二个<div>中的内容从底部填充，正如您在此fiddle中看到的那样。我想将它的内容与顶部对齐。

以下是相应的html

<div class="user-info" style="width: 100%;">
  <div id="image-container">
    <img src="image.jpeg" height="200px" width="200px">
  </div>
  <div id="info">
    <div class="info-item">
        <div class="info-attribute">tullsy</div>
    </div>
    <div class="info-item">
        <div class="info-attribute">tullsy</div>
    </div>
    <div class="info-item">
        <div class="info-attribute">tullsy</div>
    </div>
  </div>
  <div id="button-container">
    <input type="button" id="edit_button" value="edit" class="button" onclick="function()">
    <br>
  </div>
</div>

和css

#image-container {
 display: inline-block;
 width: 100;
}
#info {
 display: inline-block;
}
#button-container {
 display: inline-block;
 float: right;
 padding: 10px;
}

我可以通过对容器应用display: flex;来解决此问题，但似乎我无法在flex容器中浮动元素。

我已经设法使用<br>实现了我想要的效果，正如您在fiddle中所看到的那样。但我希望在不使用<br>或固定填充的情况下实现相同目的。

Answer 1

如果我理解正确，首先，您需要将height应用于容器#info，（这样您就可以避免使用<br>来添加高度了。否则它会＆＃39;将收缩包裹到其子项目的高度。

然后，您可以应用vertical-align:top;将inline-block子项目对齐到顶部而不使用<br> s

Demo

Flexed Divs中的浮动元素

1 个答案: