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

Posted 2023-03-05

【中文标题】无法将 6 个 div 放置为 2x3 垂直网格

【英文标题】：Having trouble to place 6 divs as a 2x3 vertical grid

【发布时间】：2018-02-23 11:00:59

【问题描述】：

我已经学习 html 和 CSS 一个星期了，我开始了在线课程。在它的第一部分结束时，我必须创建一个响应式投资组合页面。正如你所知道的，我还没有任何项目，所以我决定想象我有并且我整天都在努力创建一个我创建的 div 的简单网格。我希望它是 2 列，每列 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"  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"  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"  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"  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"  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"  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>

【参考方案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%;

【讨论】：

非常感谢，效果很好！我现在将研究你的代码，因为我今天真的把头撞在墙上，无法创建相同的效果。

如果你想学习如何使用它，这里有一个完整的 flexbox 指南；）css-tricks.com/snippets/css/a-guide-to-flexbox

【参考方案2】：

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

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

但更简洁的选择是使用 flex：https://www.w3schools.com/cs-s-ref/css3_pr_flex.asp

【参考方案3】：

你好，请改成这样，

 .responsive  height: auto;