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定位和邊框問題

回答

相關問題