float неправильно выравнивает элементы div

HTML:

  <div class="table" style="display:table;width:600px">
      <div style="display:table-row">

         <div style="width:30%;float:left;display:table-cell">Flow ID</div> 
         <div style="width:60%;float:right;display:table-cell">
             <input type="text" name="flowid" size="20" id="flowid"/>
         </div> 
         <div style="width:10%,float:right;display:table-cell">  [Default : 32] </div>
      </div>

      <div style="display:table-row">
          <div style="width:30%;float:left;display:table-cell">Traffic Class</div>
          <div style="width:60%;float:right;display:table-cell">
              <input type="text" name="traffic" size="20" id="traffic"/> 
          </div>          
          <div style="width:10%;float:right;display:table-cell"> [Default : 0] </div>
      </div>
  </div>

CSS:

div.table {
 font: 81.25%/1 arial,helvetica,sans-serif;
 font-weight:bold;
 background-color:rgb(241,241,241);
 margin: 0 auto;
 width: 50%;
 text-align:center;
 border-width: 1px 1px 1px 1px;
 border-style: solid;
 border-color: rgb(229, 229, 229);
}

Вывод, который я получаю:

введите здесь описание изображения

Почему такое странное поведение?

Несмотря на то, что первая строка кажется правильно организованной, но все же элементы таблицы-ячейки не полностью выровнены по левому и правому краю. Что касается второго ряда, я понятия не имею, что происходит?

Я новичок в использовании div, поскольку я делал все эти вещи с таблицами, поэтому, пожалуйста, извините, если пропустил что-то тривиальное.


html css css-float
person Udit Gupta    schedule 19.02.2013    source источник
comment
1. Зачем использовать таблицу CSS, если можно использовать таблицу HTML   -  person James Coyle    schedule 20.02.2013
comment
2. В чем причина поплавков?   -  person James Coyle    schedule 20.02.2013
comment
Если вы пытаетесь отобразить макет таблицы, вам следует использовать элемент ‹table›.   -  person Pedro Estrada    schedule 20.02.2013
comment
Я бы не сказал «должен», поскольку есть много причин для использования таблицы на основе CSS. Просто в данном случае, похоже, его нет.   -  person James Coyle    schedule 20.02.2013
comment
Таблица неплоха, если то, что вы пытаетесь сделать, это таблица: stackoverflow.com/questions/7877754/   -  person andrewdudek84    schedule 20.02.2013

Ответы (2)


arrow_upward
2
arrow_downward

Поплавки не нужны, и у вас также была опечатка в одном из встроенных стилей:

width:10%,float:right; должно быть width:10%;float:right;.

Вот как это работает: http://jsfiddle.net/sQ4Nb/

Вот как у вас должен быть код: http://jsfiddle.net/cS35y/

А вот версия таблицы HTML: http://jsfiddle.net/53fKu/

person James Coyle    schedule 19.02.2013

arrow_upward
-1
arrow_downward

Зачем вы используете элементы div, если решили отображать их как таблицу? Вы можете попробовать что-то вроде этого: jsfiddle

<ul id="wrapper">
    <li>
        <div style="width:30%;" class="cell">Flow ID</div>
        <div style="width:55%;" class="cell">
            <input type="text" name="flowid" size="20" id="flowid" />
        </div>
        <div style="width:15%;" class="cell">[Default : 32]</div>
    </li>
    <li>
        <div style="width:30%;" class="cell">Traffic Class</div>
        <div style="width:55%;" class="cell">
            <input type="text" name="traffic" size="20" id="traffic" />
        </div>
        <div style="width:15%;" class="cell">[Default : 0]</div>
    </li>
</ul>

#wrapper {
    width: 600px;
    list-style: none;
}
.cell {
    float: left;
}
person risto    schedule 19.02.2013
comment
Тег li определенно не подходит для строки таблицы. - person James Coyle; 20.02.2013
comment
Не лучшее решение, плюс вам не хватает открывающего и закрывающего тега UL. - person Billy Moat; 20.02.2013
comment
Почему ли не подходит? Я видел много высококачественных сайтов, которые используют элементы списка для таких операций. Кроме того, div вместо ul не имеет большого значения, поскольку оба используют display: block. Посмотрите на мой jsfiddle, он отлично работает без использования div в качестве элементов таблицы. Я действительно не вижу смысла в <div style="display:table-row"> вместо <tr>? - person risto; 20.02.2013
comment
Я изменил его на <ul>, чтобы учесть ваше возражение. - person risto; 20.02.2013