Question

我想像这样对齐两个div：

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

我已经能够像我想要的那样将盒子div放在屏幕中间，但是我只能用绝对像素值在正确的位置获得标题。我遇到的问题是盒子div必须根据其内容改变大小，如果我使用绝对像素值，使它适用于不同的屏幕分辨率将是有问题的。有没有办法让标题div与box 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;
}

Answer 1

如果您将#title放在#box内，则#title的位置将始终相对于#box的位置。

然后，在#title上使用这些样式：

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

此#title位于其原始位置的左侧。

结帐http://jsfiddle.net/Xus2c/。

Answer 2

尝试：

#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;
}

对齐未知大小的div

2 个答案: