мой стиль коллажей не работает. используя flex css - PullRequest
Новая
       46

мой стиль коллажей не работает. используя flex css

0 голосов
/ 08 марта 2020

мой стиль кода галереи колледжа не работает.

мой стиль кода галереи колледжа не работает. используя стиль flex CSS, а при проверке chrome не отображается. только я должен нажать + новое правило стиля в верхнем правом углу chrome инспектор, а встроенный стиль - единственное, что работает для меня. Мне нужна помощь, пожалуйста. ### 

body {
    margin: 4rem;
    box-sizing: border-box;
}

#cola-main {
    display: flex !important;
    width: 100%;
    position: relative;
    margin: 5rem;
    justify-content: center;
}

.cola_column {
    display: block;
    flex-basis: 0;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 1.45rem;
}

.photo_item {
    position: relative;
    display: block;
    z-index: 0;
}

div img {
    width: 300px;
}
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/b07ab3b520.js" crossorigin="anonymous"></script>
    <title>1nd</title>

    <body>
<div class="main">
            <div id=“cola-main”>

                <div class=“cola_column”>
                    <div class=“photo_item”>
                        <img src="https://picsum.photos/id/237/200/" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1002/4312/2868.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1/5616/3744.jpg" alt="">
                    </div>
                </div>

                <div class=“photo_column”>

                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1010/5184/3456.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1011/5472/3648.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/102/4320/3240.jpg" alt="">
                    </div>
                </div>

                <div class=“photo_column”>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1025/4951/3301.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/103/2592/1936.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="https://i.picsum.photos/id/1062/5092/3395.jpg" alt="">
                    </div>
                </div>

            </div>
        </div>


    </body>
</head>

</html>
--------------CSS---------
body {
    margin: 4rem;
    box-sizing: border-box;
}

#cola-main {
    display: flex !important;
    width: 100%;
    position: relative;
    margin: 5rem;
}

.cola_column {
    display: block;
    flex-basis: 0;
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 1.45rem;
}

.photo_item {
    position: relative;
    display: block;
    z-index: 0;
}

div img {
    width: 300px;
}
-----------my html--------------
<div class="main">
            <div id=“cola-main”>

                <div class=“cola_column”>
                    <div class=“photo_item”>
                        <img src="../images/banner.jpg" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port1.png" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port1.png" alt="">
                    </div>
                </div>

                <div class=“photo_column”>

                    <div class=“photo_item”>
                        <img src="../images/port2.png" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port3.png" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port4.png" alt="">
                    </div>
                </div>

                <div class=“photo_column”>
                    <div class=“photo_item”>
                        <img src="../images/port5.png" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port6.png" alt="">
                    </div>
                    <div class=“photo_item”>
                        <img src="../images/port7.png" alt="">
                    </div>
                </div>

            </div>
        </div>

1 Ответ

0 голосов
/ 14 марта 2020

Прежде всего ваши css селекторы не работают, потому что вы не используете стандартные кавычки - "в вашем html, но некоторые другие (я думаю, на вашем родном языке) -" ". Я полагаю, вы хотите что-то вот так (я немного упростил ваш код, но многое можно удалить): 

body {
  padding: 4rem;
  margin: 0;
}

.cola_column {
  display: flex;
  justify-content: center;
}

.photo_item img {
    height: 100%;
    object-fit: cover;
    width: 300px;
}
<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <script src="https://kit.fontawesome.com/b07ab3b520.js" crossorigin="anonymous"></script>
        <title>1nd</title>
    
    <body>
        <div class="main">
            <div>
                <div class="cola_column">
                    <div class="photo_item">
                        <img src="https://picsum.photos/id/237/200/" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1002/4312/2868.jpg" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1/5616/3744.jpg" alt="">
                    </div>
                </div>
                <div class="cola_column">
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1010/5184/3456.jpg" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1011/5472/3648.jpg" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/102/4320/3240.jpg" alt="">
                    </div>
                </div>
                <div class="cola_column">
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1025/4951/3301.jpg" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/103/2592/1936.jpg" alt="">
                    </div>
                    <div class="photo_item">
                        <img src="https://i.picsum.photos/id/1062/5092/3395.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </body>
    </head>
    
    </html>

Небольшой совет - не используйте идентификаторы для выбора элементов в css и узнайте, что на самом деле делает код.

...