CSS DIV定位和边框问题

我遇到了CSS问题！ :) 我想在这里看起来像这样的一个箱子样式： http://dribbble.com/shots/1151646-Home-AgenceMe/attachments/148910（图+ 3框右）。CSS DIV定位和边框问题

现在我想：

.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;

将标题放置在右侧的相应信息上，

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

非常感谢你！

来源

2013-07-28 ManuKaracho

解决了这个问题由我自己。我需要把整个东西放在比两个div更宽的包装纸上。 – ManuKaracho

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

来源

2013-07-28 10:21:55 Vector

我无法在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>

来源

2013-07-28 10:33:54

CSS DIV定位和边框问题

回答

相关问题