Как я могу сделать 3 строки и 3 столбца, чтобы при расширении div столбец просто двигался вниз (рис в теле) - PullRequest
Новая
       10

Как я могу сделать 3 строки и 3 столбца, чтобы при расширении div столбец просто двигался вниз (рис в теле)

0 голосов
/ 27 января 2019

Можно ли использовать flex-box и javascript или какую-либо другую технику для создания дизайна сайта, как показано ниже.

На первом изображении есть 3 строки и 3 столбца, которые выровнены как сетка 3x3

На втором изображении эффект наведения на один из снимков.Я не знаю, как добиться этого эффекта.И хотел бы получить несколько советов по этому поводу.

Заранее спасибо.

деления до наведения

деления до наведения 

**Edited**:

Да, я буду показывать текст только тогда, когда он находится над ним.Я попытался добавить flex-box в div.Но это дает 4 столбца, когда завис.

.palvelut-container {
        height: 1000px;
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        flex-direction: column;
}

.flex-palvelu{
    flex: 1 1 30%;
}

Я также пытался добавить высоту к контейнеру при наведении, но это не сработало 

   .palvelut-container:hover {
         Height: 1700px;
    }

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Спасибо, KJEK-код.Это был ответ на мой вопрос.Мне пришлось немного подправить бэкэнд-код, чтобы он заработал.Я разместил код, который использовал ниже, если у кого-то возникли похожие проблемы.

Спасибо всем за ответы.Я боролся с этим некоторое время!

Вот CSS. 

.wrapper {
    display: flex;
}

.palvelut-container {
    flex: 33.3%;
    max-width: 33.3%;
}

Вот серверная часть, которую я использовал для wordpress 

<div class="wrapper container">
    <div class="palvelut-container">    


        <?php
        //Columns must be a factor of 12 (1,2,3,4,6,12)


            $args = array('parent' => 22, 'hide_empty' => false); // <!-- change to false to also display empty ones);
            $categories = get_categories( $args );

            $numOfCols = 3;
            $rowCount = 1;



            $numberOfPosts = count($categories);
            $bootstrapColWidth = ceil($numberOfPosts/$numOfCols);



            foreach($categories as $category) { ?>
                <div class="flex-palvelu">
                    <div class="thumbnail palvelut-ylataso" style="min-height: 300px;
                                                                    background: url(<?php echo z_taxonomy_image_url($category->term_id); ?>);
                                                                    background-repeat: no-repeat;
                                                                    background-size: cover;">
                       <?php
                            echo '<a class="ylataso-palvelulinkki" href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "Katso kaikki %s" ), $category->name ) . '" ' . '>' . '<h3 class="palvelu-otsikko">' . $category->name.' </h3> ';

                            ?>
                             <span class="palvelut-alataso">
                               <?php
                              $args1 = array (
                                'post_type' => 'hoito',
                                'category_name' => $category->name
                              );

                              $new_cpt_query = new WP_Query($args1);
                                while( $new_cpt_query->have_posts() ) : $new_cpt_query->the_post();

                                ?>
                                <span class="palvelut-linkki"">
                                <p><?php the_title(); ?></p>
                                </span>


                                <?php endwhile; wp_reset_postdata();?>
                            </span> 
                            </a>
                    </div> 
                </div>  
                    <?php

                        if ($rowCount == $bootstrapColWidth && $numberOfPosts > 1) {
                            echo "</div>";
                            echo "<div class='palvelut-container'> ";
                            $rowCount = 1;
                            $numberOfPosts--;
                        } else {
                            $rowCount++;
                            $numberOfPosts--;
                        }
            }
            ?>

    </div>      

</div>
0 голосов
/ 27 января 2019

Здравствуйте, Juho Pouttu, добро пожаловать в переполнение стека.
, так что это лучший ответ, который я могу вам дать на данный момент.Вам нужно будет использовать сетку, чтобы размер контейнера оставался стабильным, когда вы прячете изображение при наведении курсора.Как только вы это сделали, вы можете показать текст под ним.Я использовал список просто для простоты написания кода, но это может быть все, что вы хотите ... IE div с текстом абзаца или что-то еще.Теперь для расширения контейнер того, что вы показываете, должен быть позиционным абсолютным, чтобы он мог вырваться за пределы контейнера, и ему понадобится фон, чтобы он мог проходить поверх других изображений.Если вы хотите, чтобы весь ряд расширялся, просто удалите абсолютную позицию, если это лучше соответствует вашим потребностям / потребностям.надеюсь, это поможет, дайте мне знать, если у вас есть какие-либо вопросы. 

    * {
        margin: 0;
        padding: 0;
    }

     .wrapper-div {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
     } 
    
    .container-div {
        padding: 1rem;
    }

    .container-div:hover > img {
        display: none;
    }

    .container-div:hover > ul {
        display: block;
        position: absolute;
    }

     img {
        width: 100%;
        z-index: 1;
     }

     ul {
        list-style: none;
        background-color: #fff;
        padding: 1rem;
        display: none;
     }

     li {
        margin-bottom: 1rem;
     }
<div class="wrapper-div">
            <div class="container-div">
                <img src="https://fakeimg.pl/640x360" alt="">
                <ul>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                </ul>
            </div>
            <div class="container-div">
                <img src="https://fakeimg.pl/640x360" alt="">
                <ul>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                </ul>
            </div>
            <div class="container-div">
                <img src="https://fakeimg.pl/640x360" alt="">
                <ul>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                </ul>
            </div>
            <div class="container-div">
                <img src="https://fakeimg.pl/640x360" alt="">
                <ul>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                </ul>
            </div>
            <div class="container-div">
                <img src="https://fakeimg.pl/640x360" alt="">
                <ul>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                </ul>
            </div>
            <div class="container-div">
                <img src="https://fakeimg.pl/640x360" alt="">
                <ul>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                </ul>
            </div>
            <div class="container-div">
                <img src="https://fakeimg.pl/640x360" alt="">
                <ul>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                </ul>
            </div>
            <div class="container-div">
                <img src="https://fakeimg.pl/640x360" alt="">
                <ul>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                </ul>
            </div>
            <div class="container-div">
                <img src="https://fakeimg.pl/640x360" alt="">
                <ul>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                    <li>Example of text</li>
                </ul>
            </div>
        </div>

хорошо, второй ответ будет с flexbox, который, кажется, будет лучше соответствовать вашим потребностям ... та же концепция, однако, если ваш контент, который вы отображаете послеэффект наведения на короткое замыкание у вас возникнут проблемы с отскоком при наведении 

* {
    margin: 0;
    padding: 0;
}
    .wrapper {
        display: flex;
    }

    .column {
        flex: 33.33%;
        max-width: 33.33%;
    }
    .column-divider {
        padding: 1rem;
    }
    .column-divider:hover > img {
        display: none;
    }

    .column-divider:hover > ul {
        display: block;
    }
    img {
        width: 100%;
    }
    ul {
        list-style: none;
        display: none;
    }
    li {
        padding-bottom: 1rem;
    }
<div class="wrapper">
        <div class="column">
            <div class="column-divider">
                <img src="https://fakeimg.pl/640x360" alt="placeholder">
                <ul>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                </ul>
            </div>
            <div class="column-divider">
                <img src="https://fakeimg.pl/640x360" alt="placeholder">
                <ul>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                </ul>
            </div>
            <div class="column-divider">
                <img src="https://fakeimg.pl/640x360" alt="placeholder">
                <ul>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                </ul>
            </div>
        </div>
        <div class="column">
            <div class="column-divider">
                <img src="https://fakeimg.pl/640x360" alt="placeholder">
                <ul>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                </ul>
            </div>
            <div class="column-divider">
                <img src="https://fakeimg.pl/640x360" alt="placeholder">
                <ul>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                </ul>
            </div>
            <div class="column-divider">
                <img src="https://fakeimg.pl/640x360" alt="placeholder">
                <ul>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                </ul>
            </div>
        </div>
        <div class="column">
            <div class="column-divider">
                <img src="https://fakeimg.pl/640x360" alt="placeholder">
                <ul>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                </ul>
            </div>
            <div class="column-divider">
                <img src="https://fakeimg.pl/640x360" alt="placeholder">
                <ul>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                </ul>
            </div>
            <div class="column-divider">
                <img src="https://fakeimg.pl/640x360" alt="placeholder">
                <ul>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                    <li>Example text</li>
                </ul>
            </div>
        </div>
    </div>
...