對齊的div

我要對齊兩個div像這樣：對齊的div

 __________ 
______| Title |__________________________________ 
|  |________|         | 
|            | 
|            | 
|     Box       | 
|            | 
|            | 
|            | 
|            | 
|________________________________________________|

我已經能夠居中在屏幕中間的框格像我想要的，但我只能夠用絕對像素值在正確的位置獲得標題。我遇到的問題是，盒子div將不得不根據其內容改變大小，並且如果我使用絕對像素值，則會使它在不同的屏幕分辨率下工作會產生問題。有沒有什麼辦法讓標題div與盒子div對齊而不使用絕對像素值？

這裏是我的代碼：

HTML：

<html> 
    <head> 
     <link rel="stylesheet" href="./inst.css" type="text/css"> 
    </head> 
    <body id="bkg"> 
     <div id="cntr"> 
      <div id="title">test</div> 
      <div id = "box"></div> 
     </div> 
    </body> 
</html>

CSS：

#box 
{ 
width:40%; 
height:30%; 
background-color:white; 
box-shadow: 10px 10px 5px #0C0C0F; 
border-radius:10px; 
border:2px solid black; 
position:absolute; 
margin:auto; 
top:0; 
bottom:0; 
left:0; 
right:0; 
} 

#title { 
background-color:white; 
border-radius:10px; 
border:2px solid black; 
position: absolute; 
z-index: 2; 
padding:5px; 
}

來源

2012-03-15 user381261

如果你把#title裏面#box，那麼#title的位置將始終相對於#box的位置。

然後，使用上#title這些樣式：

position: relative; 
top: -12px; 
left: 10px;

這#title併到其原始位置的左側。

結帳http://jsfiddle.net/Xus2c/。

來源

2012-03-15 19:11:03 KatieK

您的作品非常好，只是標題框一直延伸到右側。除了給它一個設置的大小或正確的偏移量之外，你有什麼建議可以避免這個嗎？ – user381261 2012-03-15 21:17:52

是 - 爲標題指定一個寬度，或者將其設置爲一個內聯元素（就像我在JS小提琴中所做的那樣）。 – KatieK 2012-03-15 21:19:37

太棒了！謝謝。 – user381261 2012-03-15 21:36:38

嘗試：

#box 
{ 
background-color:white; 
box-shadow: 10px 10px 5px #0C0C0F; 
border-radius:10px; 
border:2px solid black; 
width: 100%; 
height: 100%; 
} 
#title { 
background-color:white; 
border-radius:10px; 
border:2px solid black; 
position: absolute; 
top: -10px; 
left: 10%; 
z-index: 2; 
padding:5px; 
} 
#cntr { 
width:40%; 
height:30%; 
position: absolute; 
margin:auto; 
top:0; 
bottom:0; 
left:0; 
right:0; 
}

來源

2012-03-15 18:04:24

對不起，我只注意到我遺漏了錯誤的css代碼。我剛剛更新了它。 – user381261 2012-03-15 18:22:56

答覆已更新。 – 2012-03-15 19:15:49

回答

相關問題