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

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

2 голосов
/ 08 мая 2009

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

Ответы [ 5 ]

3 голосов
/ 08 мая 2009

При использовании @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>
1 голос
/ 09 мая 2009

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

    #container {
        width: 960px;
        margin: 0px auto;
    }
    
    #sidebar {
        float: right;
    }
<div id="container">
        <div id="sidebar">
        some content
        </div>
    </div>
0 голосов
/ 12 марта 2014

Старый вопрос, но способствующий, поскольку в других ответах вроде бы не хватало этого «чего-то», и оно все еще находится на вершине 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;
}
0 голосов
/ 08 мая 2009

Дайте контейнеру div позицию свойства: относительный; поместите ваш плавающий 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>
0 голосов
/ 08 мая 2009

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

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

...