Question

我希望改进我的CSS并想知道是否有人可以快速查看我到目前为止的内容并解释我可以改进的地方。

＆＃13;

.author div {
  width: 35%;
  float: left
}
.author div.img {
  width: 30%
}
.date {
  text-align: right
}

＆＃13;

<div class="author">

  <div class="img">
    <img src="http://placehold.it/70x70" />
  </div>

  <div>
    <p><span class="vcard">Barry Rooney</span>
    </p>
  </div>

  <div>
    <p class="date"><span>Today's Date</span>
    </p>
  </div>

</div>

＆＃13;

Answer 1

在选择器块中省略最后一个CSS定义末尾的;并不是一个好习惯。另外，我建议您按字母顺序对CSS定义进行排序。

然后，保持您的HTML尽可能短。请参阅下面的建议。不要省略元素的强制属性（在这种情况下alt上的img）。

.author {
  font-size: 0;  /* This fixes unwanted whitespace issues */ 
}
.author > * {
  display: inline-block;
  font-size: 14px; /* resetting the font-size to what you actually need */
  vertical-align: middle;
  width: 35%;
}
.author .img {
  width: 30%;
}
.date {
  text-align: right;
}

<div class="author">
  <div class="img"><img src="http://placehold.it/70x70" alt="" /></div>
  <span class="vcard">Barry Rooney</span>
  <p class="date">Today's Date</p>
</div>

在CSS中更好的方法吗？

1 个答案: