Align дивы неизвестного размера

Я хочу, чтобы выровнять две дивы, как так:Align дивы неизвестного размера

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

я смог центрирование DIV окна в центре экрана, как я хочу, но я только был в состоянии получите заголовок в нужном месте с абсолютными значениями пикселей. Проблема в том, что ящик 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

Да - укажите ширину заголовка или сделайте его встроенным элементом (например, пролетом, как это было в скрипте JS). – KatieK

Удивительный! Благодарю. – user381261

Try:

#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

Ответа на этот вопрос. –

Align дивы неизвестного размера

ответ

Смежные вопросы