макет таблицы и div

Question

Стол

<table>
    <tr>
        <td>
            <button>10000000000</button>
        </td>
        <td>
            <button>10000000000</button>
        </td>
    </tr>
</table>

и div

<div> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

Эти двое делают то же самое; показывает 2 кнопки рядом друг с другом, мой вопрос заключается в том, как я могу держать эти 2 кнопки рядом друг с другом в div, если размер окна изменяется в меньшую область. Стол держит их рядом, но я не хочу использовать столы.

Танкс за помощь

Answer 1

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

<div style="width: 200px;"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

Если вы хотите иметь возможность указывать элементу div "идти вперед и принимать 100% ширины, как обычно, но всегда выделяйте не менее 200px, даже если это ширина более 100%" , вы можете использовать min-width:

<div style="min-width: 200px;"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

Теперь, это не работает в IE6, но вот другое решение для того же, которое работает:

<div> 
  <div style="width: 200px;">
     <!-- parent can never be smaller than its biggest child -->
  </div>
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

Другое решение, в частности, чтобы сказать что-то, что не нужно переносить, было бы установить white-space, который является CSS-эквивалентом устаревшего <nobr/>

<div style="white-space: nowrap;"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

Обратите внимание, что это последнее решение вообще не допускает разрывов строк, кроме тех, которые были вручную созданы с помощью <br/> или другого элемента блока.

Answer 2

<div style="width:400px"> 
  <span ><button>10000000000</button></span> 
  <span ><button>10000000000</button></span> 
</div>

Answer 3

Вы можете использовать свойство / значение CSS white-space: nowrap, чтобы предотвратить разрывы строк во встроенном содержимом.

Answer 4

В CSS

div {
   display: block;
   /** Setting width if needs be */
   width: 100%;
}

div span {
    display: inline;

/* or */
    float: left;
}

Answer 5

Попробуйте дать им всю ширину:

<div style="width:300px;"> 
  <span ><button style="width:100px;">10000000000</button></span> 
  <span ><button style="width:100px;">10000000000</button></span> 
</div>