我的拼贴画库代码样式无效。使用flex css

问题描述 投票：0回答：1

我的大学画廊代码样式无效。

我的大学画廊代码样式无效。使用Flex CSS样式，当我检查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>
html css google-chrome flexbox photo-gallery
1个回答
0
投票

首先，您的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>

一点建议-不要使用id在CSS中选择元素，而要学习代码的实际作用。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.