Лучший способ сделать DIVs бок о бок в CSS

Question

У меня есть 2 DIV, которые я хочу быть рядом при любых обстоятельствах .Пока я выполняю это так:

<code><div style="float: left">
    <table> ... </table>
</div>

<div style="float: right; overflow: scroll; width: 1000px">
    <pre> ... 

Однако Мне не нравится, что я должен указать абсолютную ширину 2nd div.

Я просто хочу, чтобы 1st div был минимальной шириной для отображения таблицы, а 2nd div занимал оставшееся пространство без переполнения.Есть ли лучший способ?

Answer 1

Один из способов, который я нашел достаточно универсальным, - плавать только один от делений.Переместим левый и поместим , что много отступов в правом div.Вот пример того, что я имею в виду: http://jsfiddle.net/a6Bv8/ - я поместил один с внутренней оберткой для границ или требований заполнения, чтобы сделать его плавным, а также пример с тремя столбцами ..

#left { width:50%; float:left; }
#right { padding-left:50%; }

<div id="container">
   <div id="left">
       left left left
   </div>
   <div id="right">
        right right right
   </div>
</div>

Это тоже хорошо, чтобы сделать три столбца.Вы можете переместить первый div влево и присвоить ему ширину (скажем, 200px), переместить правый столбец вправо и установить его ширину (скажем, 200px) и установить для padding третьего div значение padding-left: 200px; padding-право: 200px (или 210, если вы хотите разрыв).

Answer 2

Если вы не возражаете игнорировать ie6 & 7, это будет хорошо работать:

<div style="white-space:nowrap;">
  <div style="display:inline-block;"> 
    blah
  </div> 

  <div style="display:inline-block;"> 
    blah
  </div> 

  <div style="clear:both;"></div>
</div>

Возможно, есть какой-то хак, который сделает эту работу в этом браузере, проверьте: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 3

Когда вы говорите «остальное пространство», что вы имеете в виду. Если ваш стол вдруг оказался 3000px, что должно произойти?

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

<code><div style="width: 1500px;">
  <div style="float: left"> 
    <table> ... </table> 
  </div> 

  <div style="float: right;"> 
    <pre> ...