Question

我无法弄清楚为什么图像被卡在列中，我尝试使用flex-row + wrap以便它们基本上显示8个正方形，但我尝试过的任何方法似乎都无法解决该问题，下面是应该显示的图像，希望对您有所帮助。

感谢您的帮助。

function openNav() {
    document.getElementById("mySidenav").style.width = "500px";
    document.getElementById("buttoncontain").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("buttoncontain").style.marginLeft = "0";
}

body{
    
margin:0;
width:auto;
height:auto;
    
}

#container {
display: flex;
width:100vw;
    
}

.right {
flex-direction:row;
flex-wrap: row wrap;
position: relative;
width:auto;
margin-left:5%;
    
}

.img1{
    
width:auto;
height:18em;

    
}

h1{
    
margin-top:0.5em;
font-size:1.5em;
font-family: 'Karla', sans-serif;  
font-weight:200;

}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: white;
    overflow-x: hidden;
    padding-top: 60px; 
    transition: 0.5s; 
}

#buttonnav{
    
background-color: white; 
height:100vh;
width:3vw;
padding:10px;
margin:0;
box-shadow: 4px 0px rgba(0, 0, 0, 0.1);
position:relative;    
}

.svg1{
        
margin:15px;
cursor: pointer;

}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: black;
    display: block;
    transition: 0.3s;
    font-family: 'Karla', sans-serif;
}

/* Navigation Hover */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Close Button */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* smaller screens, less than 450px */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet"> 
    <meta charset="UTF-8">
    <title>BeyondBelfastResearch</title>
</head>

<body>
 
 <div id="container">

 <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Overview</a>
  <a href="#">Research</a>
  <a href="#">Prototyping</a>
  <a href="#">Illustrations</a>
  <a href="#">Sketches</a>
  <a href="#">Essay</a>
  <a href="#">Final Design</a>
  <a href="#">Extra</a>
</div>
   
<div id="buttonnav">
    <span class="span1" onclick="openNav()">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 77.5" class="svg1"> <rect width="128" height="13.7" class="svg1"/> <rect y="63.8" width="128" height="13.7" class="undefined"/> </svg>
    </span> 
</div>

<div class="right">
   
   <img alt="image1" class="img1" src="img/test1.jpg"><h1>Overview</h1>
   
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Research</h1>
    
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Prototyping</h1>
    
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Illustrations</h1>
    
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Sketches</h1>
   
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Essay</h1>
    
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Final Design</h1>
    
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Extra</h1>
    
    </div>
</div>

</body>

<script src="js/sidebar.js"></script>

</html>

Answer 1

您需要使容器成为flexbox，以使这些flex属性生效。将DataServiceContext添加到display: flex .right的CSS中。

为什么“弹性方向：行”不适用于这些图像？

1 个答案: