css float not canceling

У меня есть 5 маркеров абзаца, которые все плавают рядом друг с другом, используя класс CSS.css float not canceling

Когда я добавить свой 6-маркер абзаца я предполагал, и хотел, чтобы двигаться вниз, однако она плавает рядом с другим 5.

Я создал этот jsfiddle, так что вы можете увидеть, что я до сих пор, <http://jsfiddle.net/rtze3a8g/1/>

В основном я пытаюсь создать собственную панель вкладок.

Для этого я надеюсь, что правильно объяснил. Спасибо за терпеливость.

источник

2014-11-29 Jeff

Пожалуйста, место, куда вы r непосредственно в вопросе. Если вам нужна помощь в форматировании кода, см. Http://stackoverflow.com/editing-help или нажмите? в текстовом редакторе. – BoltClock

Try с этим: jsFiddle

Если у вас есть элементы с плавающей запятой рядом друг с другими, если вы хотите, чтобы некоторые из них взять на себя всю линию (действующие в качестве элемента «блок»), вам нужно использовать clear: both

источник

2014-11-29 02:54:35 xeth23

Спасибо за помощь. – Jeff

Вы можете также использовать ясно: слева очистить поплавок влево

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t } 
 

 
html { 
 
\t font-size: 100%; 
 
\t } 
 

 
body { 
 
\t font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif; 
 
\t color: #000000; 
 
\t background: #6D9BF1; 
 
\t padding: 20px; 
 
\t } 
 

 
#wrapper { 
 
\t font-size: 1.2em; 
 
\t line-height: 1.5em; 
 
\t background-color: #ffffff; 
 
\t width: 700px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t } 
 

 
p { 
 
\t margin-bottom: 1.5em; 
 
    
 
\t } 
 
p.newLine{clear:left;} 
 
p.ribbon{ 
 
\t float: left; 
 
\t padding: 5px 10px 5px 10px; 
 
\t font-weight: bold; 
 
\t } 
 

 
p.ribbon:hover{ 
 
\t background-color: #87CEEB; 
 
\t color: white; 
 
} 
 

 
p.reset{ 
 
\t float: none; 
 
}

<!DOCTYPE html> 
 
    <title>Enter Title Here</title> 
 
\t <script> 
 
\t \t function newfunction(){ 
 
\t \t } 
 
\t </script> 
 
<body> 
 
    <div id="wrapper"> 
 
\t \t <p class="ribbon">Home</p> 
 
\t \t <p class="ribbon">History</p> 
 
\t \t <p class="ribbon">Location</p> 
 
\t \t <p class="ribbon">Photos</p> 
 
\t \t <p class="ribbon">Contact Us</p> 
 
\t \t <p class="newLine">This is test information</p> 
 
\t \t <p>This is test information</p> 
 
\t </div> 
 
\t \t \t 
 
</body> 
 
</html>

источник

2014-11-29 04:26:14

css float not canceling

ответ

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