CSS DIV定位和边框问题

Question

我遇到了 CSS 问题! :) 我想在这里设计一个盒子看起来像这样: http://dribbble.com/shots/1151646-Home-AgenceMe/attachments/148910 (图表 + 右侧 3 个框)。

现在我试过:

.wktcontent {
   float: left;
   width: 80%;
}
.wktinfo {
   float: right;
   width: 20%; 
}
.wkttitle {
   height:34px;
   padding:5px;
   border-bottom:1px solid #000000;
   margin-bottom:20px;
}

.wktinfocontent {
  font-weight:bold;
  border-top:1px dashed #000000;
}

在 html 中:

<div class="wktcontent">
  <center><h2>Title</h2></center>
  <p><h3>Content</h3></p>
</div>
<div class="wktinfo">
  <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
  <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
  <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
  <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
</div>

我认为一切都很好。但是一旦我通过定义给框添加边框

border: 1px solid lightblue;

标题位于右侧的信息之上。

问题的第二部分是:如何将右侧的数字(如运球示例中的数字)与其旁边的文本对齐？

非常感谢!!

Answer 1

添加边框会改变元素的尺寸。如果向元素添加 1px 边框，则从其宽度和高度中删除 1px。如果不这样做，将导致布局问题。