Плавающий другой div рядом с основным центрированным div

Итак, у меня есть веб-сайт, и все это завернуто в контейнер. Этот контейнер центрируется с помощью margin:auto. Я хотел бы поместить часть содержимого справа от этого центрированного контейнера и прикрепить его сбоку, независимо от того, изменит ли пользователь размер окна браузера и т. д. Мне интересно, есть ли действительно простой способ сделайте это, а не добавляйте еще один огромный div, задавая ему ширину и перемещая центральную часть влево, а часть содержимого вправо. Спасибо!


html css center css-float
person Community    schedule 08.05.2009    source источник

Ответы (5)


arrow_upward
4
arrow_downward

Совмещая @NickAllen, вы хотите использовать абсолютное позиционирование, чтобы ширина боковой панели не включалась в центрирование основного контейнера.

#container {
  position: relative;
  width: 500px;
  border: 1px solid #f00;
  margin: 0px auto;
}
#sidebar {
  position: absolute;
  width: 200px;
  right: -200px;
  border: 1px solid #0f0;
}
<div id="container">
  <div id="sidebar">
    [ sidebar content ]<br>
    [ sidebar content ]<br>
  </div>
  [content]<br>
  [content]<br>
  [content]<br>
</div>

person great_llama    schedule 08.05.2009
comment
... с оговоркой, что, поскольку боковая панель исключена из расчетов макета, вы всегда хотите, чтобы ваш основной контент был длиннее, чем боковая панель! - person great_llama; 08.05.2009
comment
очень странно, что в наших примерах мы оба выбрали боковую панель размером 200 пикселей! ржунимагу - person Nick Allen; 08.05.2009
comment
200px оставляет много места для баннеров 160 x 600... =) - person great_llama; 08.05.2009

arrow_upward
1
arrow_downward

Возможно, я неправильно понимаю ваш вопрос, но разве это не то, что вы хотите:

    #container {
        width: 960px;
        margin: 0px auto;
    }
    
    #sidebar {
        float: right;
    }
<div id="container">
        <div id="sidebar">
        some content
        </div>
    </div>

person roryf    schedule 08.05.2009

arrow_upward
0
arrow_downward

Дайте div-контейнеру свойство position: relative; поместите свой плавающий div в качестве первого дочернего элемента div-контейнера и дайте ему

#floatingDiv
{
    position: absolute;
    top: 0;
    right: -{widthOfFloatedDiv};
}

Я думаю, что это сработает, но не проверено

Хорошо, так что проверил это, и это работает

<div style="position: relative; width: 980px; margin: 0 auto; border: 1px solid #000; height: 400px;">
    <div style="position: absolute; top: 0; right: -200px; width: 200px;">
        <p>Floated DIV</p>
    </div>
    <p>container div</p>
</div>
person Nick Allen    schedule 08.05.2009

arrow_upward
0
arrow_downward

Старый вопрос, но он помогает, поскольку в других ответах не хватало этого «чего-то», и он все еще находится на вершине Google. Самый простой и чистый способ добиться этого — использовать две оболочки.

<div class="bigWrapper">
  <div class="sidebar">Hello, I'm your sidebar</div>      

  <div class="smallWrapper">
    Put the thing you want to center here.
  </div>
</div>

Со следующим css:

.bigWrapper { 
    width: 1000px;
    height: auto;
    margin: auto;
}

.smallWrapper {
    width: 500px;
    height: auto;
    margin: auto;
}

.sidebar {
    width: 250px;
    float: left;
    height: auto;
}
person Kasperi    schedule 12.03.2014

arrow_upward
-1
arrow_downward

Плавающий путь для этого. Они всегда будут слипаться, если контейнер не меньше суммы их ширин.

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

person Seb    schedule 08.05.2009
comment
Единственная проблема заключается в том, что он сдвинет контейнер div с центра. - person Nick Allen; 08.05.2009
comment
Этого не будет, если вы установите поля соответственно. - person Seb; 08.05.2009