Question

我在图片旁边安排了几个块级元素，并使用以下HTML / CSS来定位所有内容：

<style>
#logo p {
    font-size: 24px;
    margin-left: 220px;
    margin-top: -27px;
}

#logo img {
    position: absolute;
    top: 10px;
}

#logo #a {
    padding-top: 43px;
}
</style>

<div id="logo">
  <p id="a">Label A</p>
  <p id="b">Label B</p>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
</div>

（此处可编辑版本：http://jsfiddle.net/49cAv/1/）

为了让两个P元素更接近，我使用了margin-top: -27px;和padding-top: 43px;的组合，这看起来有点笨拙。

有更好/更清洁的方法吗？

Answer 1

这是我的解决方案：

<强> HTML

<div id="logo">
    <div id="imgCont">
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
    </div>
    <div id="labelCont">
      <p id="a">Label A</p>
        <span style="clear:left"></span>
      <p id="b">Label B</p>
    </div>

</div>

<强> CSS

*{
    padding:0;
    margin:0;
}

#logo p {
    font-size: 24px;
}

#logo img {
    position: relative;
}

#imgCont{
    float:left;
}

#labelCont{
    float: left;
    padding: 15px;
}

fiddle

块元素的垂直间距

1 个答案: