Question

我创建了一个包含东西的div。在这些div中我有div，我有其他div嵌套。当我在这些嵌套的div中放置文本时，它会移动父div的顶部。就像它给它一个保证金，但没有一个。我尝试删除所有填充和边距，以及格式化文本。您可以通过此here了解我的意思。

＆＃13;

.artworkShowcase #artworkDisplay{
  width:calc(100% - 14px);
  margin:7px;
  height:80%;
  background-color:#FFF;	
  border-radius:5px;
}

.artworkShowcase{
  display:inline-block;
  background-color:#34495e;
  width:calc(100% / 3 - 34px);
  height:250px;
  border-radius:5px;
}

＆＃13;

<div class="artworkShowcase">
  <div id="artworkDisplay"></div>
  <div id="aTitle">TITLE</div>
  <div id="aPrice">PRICE</div>
</div>
<div class="artworkShowcase"></div>

＆＃13;

Answer 1

您需要做的就是添加css规则以使div向左浮动。这是因为它包含其他div。如果您为这两个div添加相同的代码，它们将正确对齐。查看下面的更正代码。运行代码段，它应该工作正常。以下是fiddle，以防万一。

.artworkShowcase #artworkDisplay{
  width:calc(100% - 14px);
  margin:7px;
  height:80%;
  background-color:#FFF;	
  border-radius:5px;
}

.artworkShowcase{
  display:inline-block;
  background-color:#34495e;
  width:calc(100% / 3 - 34px);
  height:250px;
  border-radius:5px;
  float:left;
  margin:2px;
}

<div class="artworkShowcase">
  <div id="artworkDisplay"></div>
  <div id="aTitle">TITLE</div>
  <div id="aPrice">PRICE</div>
</div>
<div class="artworkShowcase"></div>

Answer 2

这是因为inline-block s的默认垂直对齐方式是沿着它们的基线（如果DIV不包含文本，则是文本的最后一行或下边框）。只需将vertical align: top;添加到.artworkShowcase，就可以满足您的需求。

http://jsfiddle.net/kwj0cetL/1/

影响定位的文字

2 个答案: