CSS3 Столбцы охватывают вертикально

Question

CSS3 Столбцы охватывают вертикально

0

Я делаю основной раскладку столбцов для фотографий с помощью Columns CSS3,

проблема в том, что таким образом он сначала выравнивает содержимое по вертикали, а затем переходит к следующему столбцу

например, рассмотрим это: http://jsfiddle.net/LQEfK/1/

здесь, как вы видите первый и третий img находятся в первом column. Я нашел -webkit-column-axis которая мало документирована и поддерживается только Chrome.

<div class="image-gallery main">
    <?php while ( bp_has_images() ) : bp_the_image(); ?>
        <div class="image-thumb-box">
            <img alt="<?php bp_gallplus_image_id() ?>" src="<?php bp_image_mid_url() ?>" alt="">
        </div>
    <?php endwhile; ?>
</div>

Теперь я хочу переделать этот php для выравнивания с этим CSS. Как и save make 3 переменные во while цикла, и каждый должен содержать столбец, который будет правильным для columns css

CBeTJlu4ok 17 дек. 2013, в 00:14

Источник

1

Если вы не расположите их по столбцам, они будут выровнены по строкам слева направо (по умолчанию, при желании их можно изменить справа налево).
David Thomas 16 дек. 2013, в 22:21
0

какой браузер? Вы специально ориентированы на -webkit.
PA. 16 дек. 2013, в 22:22
0

Извините, я только что скопировал WebKit, я обновлю его сейчас, но это не проблема @DavidThomas, что вы имеете в виду?
CBeTJlu4ok 16 дек. 2013, в 22:28
0

Вы хотите, чтобы изображения сначала заполняли строки, а не столбцы? Так почему вы размещаете их по столбцам, а не просто используете строки (по умолчанию для встроенных элементов)?
David Thomas 16 дек. 2013, в 22:31
0

потому что я хочу этот стиль изображения, как вы знаете, изотоп , одинаковой ширины, но разной высоты
CBeTJlu4ok 16 дек. 2013, в 22:36

Показать ещё 3 комментария

Теги:

php

html

css

css3

2 ответа

0

ваш код просто нацелен на -webkit браузеры...

попробуйте это вместо этого

.image-gallery {
  -webkit-column-count: 3;
  -webkit-column-gap:   3px;  
  -moz-column-count:    3;
  -moz-column-gap:      3px;
  column-count:         3;
  column-gap:           3px;
}

PA. 16 дек. 2013, в 19:30

Ещё вопросы

Если вы не расположите их по столбцам, они будут выровнены по строкам слева направо (по умолчанию, при желании их можно изменить справа налево).
какой браузер? Вы специально ориентированы на -webkit.
Извините, я только что скопировал WebKit, я обновлю его сейчас, но это не проблема @DavidThomas, что вы имеете в виду?
Вы хотите, чтобы изображения сначала заполняли строки, а не столбцы? Так почему вы размещаете их по столбцам, а не просто используете строки (по умолчанию для встроенных элементов)?
потому что я хочу этот стиль изображения, как вы знаете, изотоп , одинаковой ширины, но разной высоты

CBeTJlu4ok · Accepted Answer · 2013-12-16T22-01-00.000Z

Вот что я сделал;

<div class="image-gallery main">
    <?php
        $key = 1;
        $column_one = '';
        $column_two = '';
        $column_three = '';
    ?>
    <?php while ( bp_gallplus_has_images() ) : bp_gallplus_the_image(); ?>
        <?php

            if($key == 1) {
                $column_one .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
                $key++;
            } else if ($key == 2) {
                $column_two .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
                $key++;

            } else {
                $column_three .= '<img data-postid="'. bp_gallplus_get_image_id() .'" data-org="'. bp_gallplus_get_image_url() .'" class="media-popover" data-pop="popover" src="'. bp_gallplus_get_image_mid_url() .'" alt="">';
                $key = 1;
            }
        ?>
    <?php endwhile; ?>
    <?php echo $column_one . $column_two . $column_three; ?>
</div>