CSS DIV定位和边界问题

时间:2013-07-28 10:10:57

标签: css html alignment css-position stylesheet

我遇到了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;

标题放在右边的信息上。

我的问题的第二部分是:我如何将右边的数字(如运球中的例子)与旁边的文字对齐?

非常感谢你!

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我无法在jsfiddle和chrome上重现您的错误,您使用的浏览器是什么?

至于数字,我建议在每个div中使用table,这样你就可以正确对齐两半。 有点像:

<div class="wktinfocontent">
  <table>
    <tr>
      <td width="30%">
      07
      </td>
      <td width="70%">
      Hours play game today
      </td>
    </tr>
  </table>
</div>