Question

所以我正在制作一个看起来像http://www.reversl.net/colors/的布局http://www.reversl.net/demo/，但我遇到了两个小问题。

1）我无法让头像与旁边的文字底部对齐。（我尝试将vertical-align：bottom添加到img标签但无效）

2）我无法让统计数据与头像均匀对齐。应该有一种方法可以通过浮动来实现这一点，而不是必须在统计数据上添加负边距吗？

Answer 1

如果你希望它们以这种方式对齐，你应该将它们放入一个div并左右浮动它们。以下是我将在CSS中更改的内容。

.card {
  display:block;
}
.op {
  margin-top: 1em;
  float:left;
}
.meta li:after {
  content:"";
  clear:both;
  display:inline-block;
  width:1px;
  height:1px;
}

并将这些放入他们自己的div

<div class="card">
  <div class="op">
       <a href="#"><img src="avatar.png" alt="" />Josh</a>
  </div><!--.op-->
  <ul class="meta">
       <li class="fav">
            <a href="#" title="See fans of this screenshot">304</a>
        </li>
        <li class="cmnt
            ">
            <a href="#" title="View comments on this screenshot">35</a>
        </li>
   </ul>
 </div>

:after的明确修复将使父母不会在其后面崩溃。

Answer 2

<div class="op">
<a href="#">
<img alt="" src="avatar.png">
Josh
</a>
</div>
<div class="meta">
<div class="fav">
<a title="See fans of this screenshot" href="#">304</a>
</div>
<div class="cmnt ">
<a title="View comments on this screenshot" href="#">35</a>
</div>
</div>

这应该是你的css

.meta{
position:relative;
width:50%; // u  can set the width to ur preference
float:right;
height:auto;
}
.cmnt , fav {
float:left;
}
.op {
height: auto;
float:left;
margin-top: 1em;
overflow: hidden;
position: relative;
width: 50%;
}

havnt对它进行了测试，但希望它能够正常运行..

将浮动元素与图像和文本对齐

2 个答案: