Question

我有一系列有图像的div。这是CSS：

p.titles-box {
  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
  font-size: 12pt;
  color:black;
  font-weight:300;
}
#a {
  display:inline-block;
  width:200px;
  height:200px;
  background-size: cover;
  margin: 20px 20px 20px 20px;
  border-radius: 15px;
  cursor:pointer;
  opacity: 0.7;
  transition: opacity 0.5s ease;
}
#a:hover {
  opacity: 1;
}

对于html中的图像我做如下：

<div id="a" style="background-image:url('asdfasd.png')"></div>

对于文本我做如下：

<div id="a" style="background-color:white"><p class="titles-box">WordsWordsWords WordsWordsWords</p></div>

但只有带文字的div最终离网。有什么理由吗？

谢谢！

以下是该问题的图片：http://i.imgur.com/e5AdR27.png

Answer 1

这是因为两个元素（text和none）的对齐方式不同。

要解决此问题，请将vertical-align: top;添加到#a css。

#a {
  display:inline-block;
  width:200px;
  height:200px;
  background-size: cover;
  margin: 20px 20px 20px 20px;
  border-radius: 15px;
  cursor:pointer;
  opacity: 0.7;
  transition: opacity 0.5s ease;
  vertical-align: top;
}

为什么带文本的div不遵循内联块模式？

1 个答案: