За последние 24 часа нас посетили 16694 программиста и 1651 робот. Сейчас ищут 1860 программистов ...

прижать div к верху

Тема в разделе "HTML и CSS", создана пользователем zhenia3003, 2 сен 2014.

  1. zhenia3003

    zhenia3003 Активный пользователь

    С нами с:
    20 авг 2012
    Сообщения:
    184
    Симпатии:
    3
    [​IMG]

    КАК прижать нижние div впритык к верхним?? всего div около 1000 штук, поэтому не надо советовать подгонять каждый div средствами position - margin-top

    Код (Text):
    1. <style>
    2.  
    3. .bl{
    4. display: inline-block;
    5. background-color:#ccc;
    6. border:1 solid #333;
    7. width:100px;
    8. margin-bottom:10px;
    9. }
    10. </style>
    11. <table><tr><td width="400">
    12.  
    13. <div style="height:100px;" class="bl">1</div>
    14. <div style="height:40px;" class="bl">1</div>
    15. <div style="height:30px;" class="bl">1</div>
    16. <div style="height:80px;" class="bl">1</div>
    17. <div style="height:90px;" class="bl">1</div>
    18. <div style="height:150px;" class="bl">1</div>
    19. <div style="height:20px;" class="bl">1</div>
    20. <div style="height:100px;" class="bl">1</div>
    21. <div style="height:110px;" class="bl">1</div>
    22. </td></tr></table>
     
  2. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.115
    Симпатии:
    1.244
    Адрес:
    там-сям
    Расклад как на второй картинке будет если у тебя будет несколько "колонок", т.е. любых контейнеров, которые будут задавать отдельные потоки.
    В каждой из колонок элементы абсолютно естественным образом прижмутся кверху.
    Уточнение: ширина колонки должна быть недостаточной чтобы дочерние элементы разложились горизонтально.
     
  3. zhenia3003

    zhenia3003 Активный пользователь

    С нами с:
    20 авг 2012
    Сообщения:
    184
    Симпатии:
    3
    А как сделать колонки, если у меня div создаются из цикла ?

    foreach(){
    <div></div>
    }
     
  4. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.115
    Симпатии:
    1.244
    Адрес:
    там-сям
    #тыжпрограммист - думай! )))
     
  5. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    $i++ % 4 - номер колонки для i-го дива
     
  6. zhenia3003

    zhenia3003 Активный пользователь

    С нами с:
    20 авг 2012
    Сообщения:
    184
    Симпатии:
    3
    если создать внутри foreach 3 колонки - они будут дублировать одну, нужно то другое , как на картинке.

    Добавлено спустя 1 минуту 38 секунд:
    причем если получиться создать эти колонки, то div'ы будут сортироваться сперва в первой колонке по вертикали, потом во второй и тд.
     
  7. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.115
    Симпатии:
    1.244
    Адрес:
    там-сям
    Чего? Скажи по русски: ты согласен, что указанный способ разметки решает поставленную задачу? То есть тема HTML+CSS раскрыта.

    Остались затруднения как организовать генерацию страницы (цикл). Так? Если так, добро пожаловать в раздел PHP для новичков, где стОит заново сформулировать вопрос уже по новому, показать исходные данные, чего ты добился сам и что не получается.
     
  8. zhenia3003

    zhenia3003 Активный пользователь

    С нами с:
    20 авг 2012
    Сообщения:
    184
    Симпатии:
    3
    Нет, ничего не получилось, так то я и сам понимаю что разбить нужно на колонки, а как это реализовать не знаю. хорошо бы кто нибудь рабочий пример скинул
     
  9. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    разбить на части массив с элементами. каждую часть обернуть в див.
     
  10. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.115
    Симпатии:
    1.244
    Адрес:
    там-сям
    Тебе давать что-то, только растягивать агонию. За два года, что ты на форуме зареган уже можно было научиться элементарным действиям.

    В игнор!
     
  11. zhenia3003

    zhenia3003 Активный пользователь

    С нами с:
    20 авг 2012
    Сообщения:
    184
    Симпатии:
    3
    Ну извините за создание темы, я в отличие от вас не сижу здесь сутками
     
  12. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    С утками? :D
     
  13. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    Код (Text):
    1.  
    2. <div id=col1 class=column>
    3.     <div id=1></div>
    4.     <div id=2></div>
    5. </div>
    6. <div id=col2 class=column>
    7.     <div id=3></div>
    8.     <div id=4></div>
    9. </div>
    10. <div id=col3 class=column>
    11.     <div id=5></div>
    12.     <div id=6></div>
    13. </div>
    14. .column {float: left; width: 33%;}
     
  14. zhenia3003

    zhenia3003 Активный пользователь

    С нами с:
    20 авг 2012
    Сообщения:
    184
    Симпатии:
    3
    вот код, 3 колонки, но все равно пробелы между div
    Код (Text):
    1.  
    2. $Results = glob("base/*", GLOB_BRACE);
    3. foreach ($Results as $filename) {
    4. $time[$filename] =  filemtime($filename);
    5. }
    6. array_multisort($time, SORT_DESC);
    7. ?>
    8. <style>
    9. .t{
    10. display:inline-block;
    11. border:1 solid #000;
    12. width:400px;  
    13. }
    14. </style>
    15.  
    16.  <table class='t'><tr>
    17.  <?
    18.  $count=0;
    19. foreach( $time as $key=>$key_t){
    20. echo '<td>';
    21. require "require/msg.php";
    22.  echo '</td>';
    23. if( ++$count % 3 == 0 ) echo "</tr><tr>";
    24. }
    25. ?>
    26. </tr></table>
     
  15. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    И где в этой таблице хоть один див?
     
  16. zhenia3003

    zhenia3003 Активный пользователь

    С нами с:
    20 авг 2012
    Сообщения:
    184
    Симпатии:
    3
    div подключается вот тут require "require/msg.php";
     
  17. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    Ну и как ему позиционироваться, если вы его впихиваете в таблицу, где по умолчанию высота строки всегда одинакова? На кой черт тут вообще взялся этот table?
     
  18. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    можно и тейбл заюзать, если только одной единственной строкой. будет то же самое.
     
  19. zhenia3003

    zhenia3003 Активный пользователь

    С нами с:
    20 авг 2012
    Сообщения:
    184
    Симпатии:
    3
    У меня получилось как я хотел, вот код, но есть одно но - сбилась сортировка, может кто поможет отладить ?
    Код (Text):
    1.  
    2. <?
    3. $Results = glob("base/*", GLOB_BRACE);
    4. $time = array(0=>'',1=>'',2=>'',3=>'');
    5. $i = 0;
    6. foreach ($Results as $filename) {
    7. $time[$i][$filename] =  filemtime($filename);
    8. $i = $i == 3 ? 0 : $i+1;
    9. }
    10. array_multisort($time, SORT_DESC);
    11. ?>
    12. <style>
    13. .hh1{
    14. width:320px;
    15. float:left;
    16. border:1 solid #666;
    17. }
    18. </style>
    19. <div class="hh1"><?php foreach ($time[0] as $key=>$key_t){ require "require/msg.php"; } ?></div>
    20. <div class="hh1"><?php foreach ($time[1] as $key=>$key_t){ require "require/msg.php"; } ?></div>
    21. <div class="hh1"><?php foreach ($time[2] as $key=>$key_t){ require "require/msg.php"; } ?></div>
    22. <div class="hh1"><?php foreach ($time[3] as $key=>$key_t){ require "require/msg.php"; } ?></div>
     
  20. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    сначала сортируй, потом бей.
     
  21. Хыиуду

    Хыиуду Активный пользователь

    С нами с:
    3 июн 2014
    Сообщения:
    618
    Симпатии:
    5
    $time[$i][$filename] = filemtime($filename);
    $i = $i == 3 ? 0 : $i+1;
    прекрасно заменяется на
    $time[$i++ % 4] = filemtime($filename);
    И вывод четырех последних дивов тоже можно сделать в цикле.
     
  22. Your

    Your Старожил

    С нами с:
    2 июл 2011
    Сообщения:
    4.074
    Симпатии:
    7
    Просто возьми распили на части и в эти части засунь еще части и будет у тебя то, что ты хочешь.