Как отрегулировать ограничивающий прямоугольник элемента блока, чтобы он соответствовал плавающему элементу? - PullRequest
Новая
       28

Как отрегулировать ограничивающий прямоугольник элемента блока, чтобы он соответствовал плавающему элементу?

0 голосов
/ 15 января 2011

Например, я хочу, чтобы размер элемента h1 соответствовал размеру плавающего красного элемента div. Текст уже подстраивается под плавающий элемент, но фон находится за плавающим элементом.

Я знаю, что могу добавить правое поле к h1, но красный блок может иметь переменную ширину, и у меня не может быть переменного поля.

CSS: 

#redblock {            
    background: red;
    float: right;
    margin: 10px;
    width: 100px;
    height:100px;
}
#wrapper {
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    width: 300px;
}
p {
    background-color: #ffd;
}
h1 {
    background-color: #667788;
    font-size: 1.1em;
    margin: 10px 0;
}

HTML: 

<div id="wrapper">
    <div id="redblock"></div>

    <h1>Test tEst teSt tesT</h1>

    <p>Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt
    tesT Test tEst teSt tesT Test tEst teSt tesT</p>
</div>

См. http://jsbin.com/ucili4

1 Ответ

0 голосов
/ 15 января 2011

если вы добавите width:80% для h1, то получится ширина, которая найдет середину текущего красного поля.Так что, если у вас есть большая или немного меньшая красная коробка, я думаю, это сработает.(вероятно серый фон, для тестовых целей, верно?)

пример: http://jsbin.com/okive4

...