css div переполнение и динамический горизонтальный размер - PullRequest
Новая
       39

css div переполнение и динамический горизонтальный размер

2 голосов
/ 20 марта 2009

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

<html>
<style>
  .outer{width:300px;height:300px;overflow: scroll;}
  .inner{white-space: nowrap;}
  .inline{float: left;}
</style>
<body>
<div class="outer">
    <div class="inner">
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
    </div>
</div>
</body>
</html>

У меня проблемы с тем, что внутренний div оборачивает div таблицы, если я не установил большую ширину, например 4000px. Есть ли хороший способ сохранить все таблицы встроенными, даже если они превышают размер внешнего div просто css?

Ответы [ 4 ]

2 голосов
/ 23 марта 2012

Изменить .inline{float: left;} на .inline{display:inline-block;}

http://jsfiddle.net/QLe5r/

2 голосов
/ 20 марта 2009

Us this property: 

white-space:nowrap;
0 голосов
/ 23 февраля 2011

Это потому, что число с плавающей точкой: оставлено на div "inline". Вместо этого используется display: inline-block, (и display: inline для IE, я думаю. Проверьте).

0 голосов
/ 06 июня 2009

Почему на ЗЕМЛЕ у вас есть тонны таблиц внутри тонн дивов?!? Это противоречит цели использования таблиц для табличных данных ... когда вы работаете с табличными данными, вы должны просто использовать таблицы ... не применять бесполезные комбинации.

Просто используйте одну таблицу и используйте <td>stuff</td> каждый раз, когда у вас есть больше данных для добавления ... в любом случае, горизонтальное основание, так что вам даже не придется возиться с css, чтобы его расширить.

...