Question

我一直在学习HTML和CSS一周，我开始了一个在线课程。在第一部分的最后，我必须创建一个响应式投资组合页面。我还没有任何项目你可以告诉所以我决定想象我已经和我一整天都在努力创建一个我创建的div的简单网格。我希望它是彼此相邻的3列3列，可能每个元素之间有一些间距。然而，我到目前为止最接近的是让这6个元素彼此相同。那你能帮忙吗？

这是一个小提琴：https://jsfiddle.net/5tyjbLa4/1/

提前感谢您，如果我的编码风格很糟糕，请告诉我，以便我可以改进。正如我所提到的，我只在一周前开始下班后编码。

.responsive {
    font-family: inherit serif;
    width: 1000px;
    height: 1400px;
    position: relative;
    top: 200px;
    margin: auto;
    text-align: center;
    background-color: red;
    
}

.responsive li {
    list-style: none;
    margin: 0 auto;
    width: 500px;
    height: 420px;
    text-align: center;
    border: 1px solid coral;
    border-radius: 50px; 
}

.responsive li img {
    border-radius: 50px;
}

.responsive h2 {
    font-size: 40px;
    font-weight: 600;
    padding-bottom: 40px;
}

.grid-container h3 {
    font-size: 30px;
    font-weight: 800;
}
.grid-container p {
    font-family: monospace;
    font-size: 15px;

<section class="responsive">
    <h2> My work so far/ My Portfolio</h2>
    <ul class="grid-container">
        <li class="img1"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%">
            <h3>This is a photo of Jack Russell</h3>
            <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p>
        </li>
        <li class="img2"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%">
            <h3>This is a photo of Jack Russell</h3>
            <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p>
        </li>
        <li class="img3"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%">
            <h3>This is a photo of Jack Russell</h3>
            <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p>
        </li>
        <li class="img4"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%">
            <h3>This is a photo of Jack Russell</h3>
            <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p>
        </li>
        <li class="img5"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%">
            <h3>This is a photo of Jack Russell</h3>
            <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p>
        </li>
        <li class="img6"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%">
            <h3>This is a photo of Jack Russell</h3>
            <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p>
        </li>
    </ul>
</section>

Answer 1

您可以将flexbox用于简单网格：

.grid-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-left: 0;
  width: 100%;
}

.grid-container li{
  margin-bottom: 15px;
  width: 40%;
}

Answer 2

一个简单的浮动替代方案是：

.grid-container > li {
  float: left;
  width: 50%;
  display: inline-block;
  box-sizing: border-box;
}

但更清洁的选择是使用flex：https://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 3

嗨，请改变这样，

 .responsive { height: auto; }

无法将6个div作为2x3垂直网格放置

3 个答案: