CSS：如何安排复杂的div？

Question

我有一个div有两个内部div。

<div id="x">
   <div id="icon">img</div>
   <div id="text">text</div>
</div>

我需要将图标放在一个级别，第一行文字才能获得

Icon "First line
      and the second."

文本可以分成几行。

Answer 1

您应该考虑使用vertical-align属性。

另外，请注意：

• 我的ID应该是唯一的，因此如果你想多次使用它，你应该考虑使用class代替id
• display:inline-block应该用于显示彼此相邻的内容。

＆＃13;

＆＃13;

.icon{
  display:inline-block;
  height:30px;
  width:30px;
  background:url(http://www.lorempixel.com/300/300);
  background-size:100% 100%;
  vertical-align:top;
  }
.text{
  display:inline-block;
  }

＆＃13;

<div id="x">
   <div class="icon"></div>
   <div class="text">text that may span <br/> two lines<br/> or even three</div>
</div>

＆＃13;

＆＃13;

＆＃13;