CSS - проблема с плавающей запятой - Почему?

CSS-код:CSS - проблема с плавающей запятой - Почему?

.gs960 { 
     width: 960px; 
     margin: 0 auto; 
     background-color: blue; 
    } 

    #miniContainer { 
     width: 960px; 
     overflow:hidden; 
     background-color: red; 
    } 

    #sidebar { 
     width: 208px; 
     float: left; 
     background-color: yellow; 
    } 

    #cartContainer { 
     width: 100px; 
     background-color: green; 
    }

HTML-:

<body> 

    <div id="main"> 

     <div class="gs960"> 


         <div id="miniContainer"> 



          <div id="sidebar"> 
           <p>Side bar here</p> 
          </div> 

          <div id="cartContainer"> 
           <p>I need to be on the right side of Side bar</p> 
          </div> 


         </div><!-- fecha miniContainer --> 

      </div> <!-- fecha gs660 --> 

    </div> <!-- fecha main --> 


</body>

Если я применяю поплавок слева #cartContainer это остается на его стороне. Но мне это нужно?

W/вне его: 1) Почему #cartContainer не остается на правой стороне #sidebar?

Похоже, причина в том, что элемент перемещается и как блок отображения, следовательно, все элементы будут оставаться после него на «вертикальной линии».

Однако, если мы делаем:

<div id="main"> 

<div class="gs960"> 

<div id="miniContainer"> 

<div id="sidebar"> 
     <p>Side bar here</p> 
</div> 

    <p>I need to be on theasdsa dasd asda 
     I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar 
     I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar 
     I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar 
     I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar 
     I need to be on theasdsa dasd asdas ad asd asd as das das right side of Side bar 
     s ad asd asd as das das right side of Side bar</p> 
</div><!-- fecha miniContainer --> 
</div> <!-- fecha gs660 --> 
</div> <!-- fecha main -->

2) * <p> (который также блокирует по умолчанию права не запускается после #sidebar, но это сторона Почему?.? . *

Благодаря MEM

источник

2010-11-29 MEM

Посмотрите, что: http://www.jsfiddle.net/pereskokov/XptKx/2/ Причина в том, что ширина cartContainer ниже, чем боковая панель, поэтому боковая панель не может быть размещена внутри «cartContainer». Другими словами, cartContainer не может «обтекать» боковую панель.

Второй вариант работает из-за ширины p по умолчанию установлен на 100%.

Кроме того, может быть, я неправильно понял вас, так что проверить еще одно решение, если вы хотите фиксированной ширины conainers размещены горизонтально, уно Tras Otro: http://www.jsfiddle.net/pereskokov/wKKsZ/1/

источник

2010-11-29 15:42:18

Вместо плавающего `# cartContainer`, [вы можете также использовать `overflow: hidden`] (http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/), что не позволит ему сдерживать float. – mercator 2010-11-29 17:10:27

CSS - проблема с плавающей запятой - Почему?

ответ

Смежные вопросы