Как заставить Плавающие ОТДЕЛЕНИЯ в фиксированной ширине DIV продолжать горизонтально?

Реализовать __getstate__ , чтобы вернуть только те части объекта, которые должны быть засолены

37
задан mskfisher 9 May 2012 в 16:33
поделиться

7 ответов

Контроллер в первую очередь предназначен для координации между видом и моделью.

К сожалению, иногда он смешивается с представлением - в небольших приложениях это не так уж плохо.

Я предлагаю вам поместить:

public void actionPerformed(ActionEvent e)

в контроллер. Затем ваш слушатель действий в вашем представлении должен делегировать контроллеру.

Что касается части проверки, вы можете поместить ее в представление или контроллер, я лично считаю, что он принадлежит контроллеру.

Я определенно рекомендую взять взгляните на Passive View и Supervising Presenter (который, по сути, разделен на Model View Presenter - по крайней мере, Фаулером). Видеть:

41
ответ дан 27 November 2019 в 04:49
поделиться

Вам нужен дополнительный div с большой шириной, чтобы содержать блоки, тогда они будут расширяться шире, чем div контейнера, и не опускаться до новой строки.

HTML:

<div id="container">
    <div id="width">
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <!-- more blocks here -->
    </div>
</div>

] CSS:

#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}
#container #width {
    width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}
7
ответ дан 27 November 2019 в 04:49
поделиться

Оберните свои плавающие блоки в другой блок большей ширины.

<div style="width:230px;overflow-x:auto;background-color:#ccc;">
    <div style="width:400px">
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
        <div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
    </div>
</div>
1
ответ дан 27 November 2019 в 04:49
поделиться

Табличное решение должно работать очень хорошо.

Если вы не хотите использовать таблицы, вы также можете поместить все div .block в другой div внутри #container и дать этому "промежуточному-div" фиксированную - вычисляемую - ширину с помощью javascript после загрузки страницы.

Конечно, если вы уже знаете сколько .blocks у вас есть / если число фиксировано, вы можете задать фиксированную ширину "in-between-div" с помощью css.

0
ответ дан 27 November 2019 в 04:49
поделиться

Похоже, вы делаете галерею с помощью div?

Для чего именно вы используете эти div?

Может быть проще использовать ul / li с промежутками внутри li, чтобы получить тот же эффект без всех проблем с плавающими div.

0
ответ дан 27 November 2019 в 04:49
поделиться

Поместите div, которые вы хотите прокрутить, в таблицу следующим образом:

<div style='width:1000;border:2 solid red;overflow-x:auto'>
   <table><tr>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 1&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 2&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 3&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 4&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>

Изменить: Я попробовал 3 из этих предложенных решений - все они отлично работают в Google Chrome, но первое (container1) не работает в IE (см. Рисунок) - так что решение SPAN получает мой голос :-):

<html>
<body>
<style>
div#container1 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container1 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container2 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container2 span.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container3 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container3 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

</style>
<p>
<div id='container1'>
      <div class='block'>Cell 1&nbsp;</div>
      <div class='block'>Cell 2&nbsp;</div>
      <div class='block'>Cell 3&nbsp;</div>
      <div class='block'>Cell 4&nbsp;</div>
      <div class='block'>Cell 5&nbsp;</div>
</div>
<p>
<div id='container2'>
      <span class='block'>Cell 1&nbsp;</span>
      <span class='block'>Cell 2&nbsp;</span>
      <span class='block'>Cell 3&nbsp;</span>
      <span class='block'>Cell 4&nbsp;</span>
      <span class='block'>Cell 5&nbsp;</span>
</div>
<p>
<div id='container3'>
   <table><tr>
      <td><div class='block'>Cell 1&nbsp;</div></td>
      <td><div class='block'>Cell 2&nbsp;</div></td>
      <td><div class='block'>Cell 3&nbsp;</div></td>
      <td><div class='block'>Cell 4&nbsp;</div></td>
      <td><div class='block'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>
</body>
</html>

Редактировать 2 :

Я запустил эту тестовую страницу через browsershots.org, чтобы посмотреть, как с ней справляются разные браузеры. Вывод: совместимость браузера - отстой. : -)

http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm

Табличное решение работало чаще, но вариант span (который чище) ломался только в браузерах, о которых я никогда не слышал. : -)

0
ответ дан 27 November 2019 в 04:49
поделиться

Используйте:

    div#container {
        overflow: auto;
    }

Или добавьте очищающий div под тремя div со стилем:

    {
        clear: both
    }
0
ответ дан 27 November 2019 в 04:49
поделиться