Нужна помощь в понимании "позиция" и "плавать" для CSS - PullRequest
Новая
       8

Нужна помощь в понимании "позиция" и "плавать" для CSS

0 голосов
/ 02 августа 2011

По какой-то причине я не могу полностью понять, как позиция и плавающие работают вместе.Я пытаюсь сделать простой тестовый сайт для практики.В заголовке у меня есть один div для рекламы, один div для названия сайта и другой div для меню / навигации.Внутри div для рекламы у меня есть три других div.Я хочу, чтобы один слева и один справа занимал около 25% страницы, а средний - около 45% страницы.Я хочу, чтобы они были встроены.Тем не менее, когда я могу встроить рекламу, это, к сожалению, делает другие div тоже встроенными (или, по крайней мере, следующий div).Может ли кто-нибудь дать мне хорошее объяснение (ссылка) на то, как работают позиции и плавающие.Вот мои HTML и CSS. 

<div class="header">
  <div class="bs20b br5">
    <div class="ad1 ads">
      Ad1
    </div>
    <div class="ad2 ads">
      Ad2
    </div>
    <div class="ad3 ads">
      Ad3
    </div>
 </div>
 <div class="sitename">
   CITISI
 </div>
  <div class="menu">
    MENU
  </div>
</div>


body
{
  background-color: #EEE;
}

.ads
{
 position: relative;
 float: left;
 border: 1px solid black;
}

.ad1
{
 text-align: center;
 width: 100px;
}

.ad2
{
 width: 200px;
}

.ad3
{
 width: 100px;
}

.bs20b
{
 -webkit-box-shadow: 0px 0px 20px black;
 -moz-box-shadow: 0px 0px 20px black;
 box-shadow: 0px 0px 20px black;
}

.br5
{
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.sitename
{
}

Любая помощь приветствуется.Спасибо.

РЕДАКТИРОВАТЬ Я нашел этот сайт, и мне кажется, что мне нужен Шаг 9.Тем не менее, я должен что-то плавать без установки позиции?Почти каждый пример, который я когда-либо видел, показывает, что оба установлены.

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Ответы [ 5 ]

2 голосов
/ 02 августа 2011

когда вы устанавливаете float для любого необходимого элемента, после этого добавьте div с clear: оба стиля, чтобы браузер знал, что вы достигли плавающего значения, и для запуска следующего div в новой строке 

<div class="header">
  <div class="bs20b br5">
    <div class="ad1 ads">
      Ad1
    </div>
    <div class="ad2 ads">
      Ad2
    </div>
    <div class="ad3 ads">
      Ad3
    </div>
 </div>
    <div style="clear:both">
 <div class="sitename">
   CITISI
 </div>
  <div class="menu">
    MENU
  </div>
</div>
1 голос
/ 02 августа 2011

Вам нужно очистить ваши поплавки.

Добавьте это к .bs20b: 

 overflow:hidden;

http://jsfiddle.net/AlienWebguy/zbtNY/

0 голосов
/ 02 августа 2011

Забудьте любую позицию собственность.Это бесполезно в вашем примере.

  • Используйте метод clear: оба , упомянутый здесь.
  • В качестве альтернативы, вы можете просто установить overflow: hidden для родительского div, который включает в себя плавающие div.
  • Другой способ заключается в использовании display: inline-block для элементов, которые вы хотите поместить в одну строку
0 голосов
/ 02 августа 2011

Видео по этим URL очень полезны и действительно объясняют float и position. http://code.google.com/edu/submissions/html-css-javascript/#css

0 голосов
/ 02 августа 2011

Я не смотрел на вашу разметку.

Когда вы используете оба, float поместит элемент влево или вправо, в зависимости от того, что вы указали. position :lative затем поместит элемент относительно того места, где его поместил float.

...