Неисправность в плавающих элементах

Пожалуйста, взгляните на это fiddle. Как вы можете видеть, у меня есть float: left на элементе label, я ожидал, что Country4 должен начинаться с новой строки в соответствии с максимальной высотой вышеупомянутых элементов, но не смог добиться следующего результата без корректировки margin-top и margin-left (то есть не гибкий способ сделать это, как может быть country5, coutry6 позже):Неисправность в плавающих элементах

Примечание: не уверен, что там будет всегда три метки в строке может быть 2 или 3 или 4. So clear:both после в этом случае не будет работать определенное количество элементов.

enter image description here

Вот простой код:

<html> 
    <head> 
     <style> 
      label { 
       float: left; 
      } 
      dt { 
       font-weight: bold; 
       color: green; 
      } 
     </style> 
    </head> 
    <body> 
     <form style="width: 460px"> 
      <fieldset> 
       <label> 
        <dt>Country1</dt> 
         <dd>United States</dd> 
         <dd>United States</dd> 
       </label> 
       <label> 
        <dt>Country2</dt> 
         <dd>United States</dd> 
         <dd>United States</dd> 
         <dd>United States</dd> 
         <dd>United States</dd> 
         <dd>United States</dd> 
       </label> 
       <label> 
        <dt>Country3</dt> 
         <dd>United States</dd> 
       </label> 
       <label> 
        <dt>Country4</dt> 
         <dd>United States</dd> 
         <dd>United States</dd> 
         <dd>United States</dd> 
         <dd>United States</dd> 
         <dd>United States</dd> 
       </label> 
      </fieldset> 
     </form> 
    </body> 
</html>

источник

2013-11-29 Aamir Adnan

Пожалуйста, включите правильный код, чтобы воспроизвести проблему ** в самом вопросе. ** –

вы хотите использовать JQuery для этого ?? – Zword

@Zword Я надеялся получить некоторое простое решение css. Если нет способа, то jquery в порядке :( –

Вместо того, чтобы float вы, возможно, хотите использовать display:inline-block:

label { 
    width:130px; 
    vertical-align:top; 
    display:inline-block; 
}

И демонстрационная http://jsfiddle.net/dbrH9/6/

источник

2013-11-29 19:38:24 DaniP

Perfect Sir, Thanks :) –

Я нашел решение с помощью JQuery . Но вы сделали это с помощью простого CSS. +1 – Zword

рад помочь вам – DaniP

к метке вы хотите поместить в новую строку, применить это:

<label style="clear:both">

источник

2013-11-29 19:19:13

Не обязательно country4 является последним элементом. Может быть country5 country6 позже. –

Он будет работать ... Только поместите это в каждый первый элемент строки –

Если я применил ваш метод на всех 'label', он будет складывать их по вертикали, так как на этикетке есть' float: left'. –

Неисправность в плавающих элементах

ответ

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