Question

嗨我有两个相同大小的盒子，但由于某种原因，它们不会停留在同一个“线”上，一个盒子包含一个图像，另一个盒子包含文本。用文本替换图像会使它们按照我希望的方式对齐。但是，框中没有任何文本会导致它们不对齐。

<div class="boxbox">
  <sam-box class="box clickable no-padding" base="170" width="1" height="1">
    <a href="http://placekitten.com/160/160"><img src="http://placekitten.com/160/160"></a>
  </sam-box>
  <sam-box class="box clickable no-padding" base="170" width="1" height="1">
    This is a box  
  </sam-box>

我使用sam盒进行自定义测量，我可以向您保证两个元素的大小相同（确切地说是174px）。

Answer 1

您只需在内联块元素上使用vertical-align:top;即可。哦，'自定义'元素可能无法验证，你也可能有一些x浏览器问题。

JSFiddle

<强> CSS

.box {
  padding: 10px;
  background-color: transparent;
  border-radius: 10px;
  margin: 5px;
  display: inline-block;

  vertical-align:top;

  font-weight: 400;
  border: 2px solid transparent;
}

Answer 2

只需添加一个浮动：左边的.box类

float:left;

FIDDLE

Answer 3

您可能会发现在overflow:hidden;课程中添加.box可以解决您的问题 - http://jsfiddle.net/U3b8r/4/

Answer 4

为你的盒子添加浮动：左边

.box {
float:left;
}

Answer 5

使用float left并设置div的宽度和高度。尝试以下内容并根据您的需求进行修改。

.box {
    width:170px;
    height:170px;
    float:left;     
    border-radius: 10px;
    margin: 5px;
    font-weight: 400;
    border: 2px solid transparent;

}

Answer 6

因为你已经给出了Css属性display: inline-block;，所以不需要定义float：left属性。

你只需要在你的盒子类中添加以下属性

.box {
  padding: 10px;
  background-color: transparent;
  border-radius: 10px;
  margin: 5px;
  display: inline-block;
    vertical-align:top; /*only add this will work even if the image size is smaller*/
  font-weight: 400;
  border: 2px solid transparent;
}

除非两者都包含文本，否则内联块不会对齐

6 个答案: