Css - Не хочу, чтобы элементы ниже моего плавающего элемента

Question

У меня есть плавающий элемент div с текстом "sidebar".В его родительском контейнере также есть текст.
Я не хочу, чтобы текст был ниже всплывающей "боковой панели" div:

пример http://img864.imageshack.us/img864/6058/screenshot2011052613084xv.png

Как это исправить?1007 *

<div id="parent">
    <div id="floated" style="float:right">Foo bar</div>
    <h2>Foo</h2>
    <p>Text!</p>
</div>

Answer 1

Установить правое поле для неплавающего элемента

JSFiddle

Единственное требование - вы должны заранее определить ширину вашего плавающего элемента. Тогда он может иметь любую высоту, которая вам нравится, и неплавающее содержимое (при применении правого поля) не будет растягиваться под плавающим элементом.

Как это работает?

1. Элемент с плавающей точкой справа имеет width = X
2. У нас есть обычный контент, но мы установили его right margin = X + s , где s - это некоторое заранее заданное пространство между вашим контентом и плавающим элементом, чтобы они не касались.

И это все.

Поскольку у вас есть несколько элементов содержимого (заголовки, абзацы), вы должны поместить их в контейнер с этой настройкой правого поля.

<div id="parent">
    <div id="floated">Foo bar</div>
    <div id="content">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

И CSS:

#floated
{
    float: right;
    padding: 1em;
    background: #ccc;
    width: 10em;
}

#content
{
    margin-right: 13em; /* 10em width + 2 x 1em padding + 1em space */
}

Почему это решение лучше, чем настройка ширины основного контента?

Поскольку настройка ширины основного содержимого будет работать только тогда, когда вы хотите ограничить содержимое документа фиксированной шириной (например, сетка 960). Но если вы хотите, чтобы ваш контент занимал всю ширину окна браузера, это решение будет работать независимо от размера окна браузера.

И небольшой совет

Избегайте использования встроенных стилей, когда это возможно, потому что поддержка вашего приложения / сайта станет кошмаром.

Answer 2

Если это ничего не портит, вы можете использовать overflow: hidden или overflow: auto, чтобы исправить это:

<div id="parent">
    <div id="floated" style="float:right">Foo bar</div>
    <div class="next-to-float" style="overflow: hidden;">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

См. http://jsfiddle.net/pauldwaite/YL5P3/

Я написалболее подробно об этом здесь, включая код для его работы в IE 6: xHTML / CSS: как заставить внутренний div получить 100% ширину минус другой div div

Я до сих пор не могудействительно понимаю причину , почему overflow: hidden делает это, но я понимаю, что это действительно следует из спецификации CSS.

Answer 3

просто добавить ширину в тег [P], см. Здесь

пример

<div id="parent">
    <div id="floated" style="float:right">Foo bar</div>
    <h2>Foo</h2>
    <p style=" width: 500px; ">Text!</p>
</div>

например, ваш (id = "parent") имеет ширину 800px

и (id = "floated") правая полоса имеют ширину 200px

затем сделайте ваш [P] 800px - 200px = 600px

, поэтому установите ширину [P] 600px

---------- или

если вы хотите немного пробела между текстом и строкой, сделайте [P] ширину 580px

это означает 20px для пространства

Answer 4

Установить нижнее поле для плавающего элемента, равное длине остатка. Или добавьте ширину к большему элементу и переместите его в другом направлении.

<div id="parent">
    <div id="floated" style="width:200px; float:right">Foo bar</div>
    <div id="content" style="width:600px; float:left">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

OR

<div id="parent">
    <div id="floated" style="width:200px; margin-bottom:200px; float:right">Foo bar</div>
    <h2>Foo</h2>
    <p>Text!</p>
</div>

Answer 5

Вы можете вложить 2 тега div в контейнер.Переместите их обоих и измените их размер так, как вам нужно.