对齐的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

回答

相关问题