0

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

标题放在右边的信息上。

我的问题的第二部分是：如何将右侧的数字（如运球示例）与旁边的文本对齐？

太感谢了！！

4

2 回答 2

0

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

于 2013-07-28T10:21:55.213 回答
0

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

至于数字，我建议table在每个 div 中使用 a ，这样您就可以正确对齐两半。类似于以下内容：

<div class="wktinfocontent">
  <table>
    <tr>
      <td width="30%">
      07
      </td>
      <td width="70%">
      Hours play game today
      </td>
    </tr>
  </table>
</div>
于 2013-07-28T10:33:54.667 回答