Question

我创建了一个网页，我需要帮助html / css为6张图片制作一个div，其中3位在它下面3 - 所有都是href。图片变得非常大，当我试图调整它们的大小时，它将4个图片放在顶部，2个放在底部。带标题，主要部分和div的基本网页。这是我试过的

<body>
    <div class="pagepicturecontainer">
        <h2>Test Gallery</h2>
        <div>
            <a href = "sectest1.html">
                <img class = "img1" src ="./img/bike1tl.jpg"/>
            </a>
            <a href = "sectest2.html">
                <img class = "img2" src ="./img/bike1tl.jpg"/>
            </a>
            <a href = "sectest3.html">
                <img class = "img3" src ="./img/bike1tl.jpg"/>
            </a>
            <a href = "sectest4.html">
                <img class = "img4" src ="./img/bike1tl.jpg"/>
            </a>
            <a href = "sectest5.html">
                <img class = "img5" src ="./img/bike1tl.jpg"/>
            </a>
            <a href = "sectest6.html">
                <img class = "img6" src ="./img/bike1tl.jpg"/>
            </a>
        </div>
    </div>
</body>

我想帮助CSS以及对HTML的任何改进。这是我第一次尝试建立一个完整的html / css网站，所以请善待。

Answer 1

你应该看看CSS Grid https://www.w3schools.com/css/css_grid.asp
我个人使用bootstrap来帮助我的布局。但我相信CSS现在和Bootstrap一样好，所以最好先学习CSS Grid。

Answer 2

希望这是你想要的。使用css网格或任何其他库（如bootstrap）可以更易于管理，从而简化了css网格。

.image_box {
  width: 33%;
  background-color: red;
  float: left;
}

<body>

    <div class="pagepicturecontainer">
        <h2>Test Gallery</h2>
        <div>
            <div class="image_box" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2vs2Yi0pObR24br0K1Aj6MieJM1-lWOd7X9opMhIwf9yi9ie8"></div>
            <div class="image_box" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2vs2Yi0pObR24br0K1Aj6MieJM1-lWOd7X9opMhIwf9yi9ie8"></div>
            <div class="image_box" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2vs2Yi0pObR24br0K1Aj6MieJM1-lWOd7X9opMhIwf9yi9ie8"></div>
            <div class="image_box" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2vs2Yi0pObR24br0K1Aj6MieJM1-lWOd7X9opMhIwf9yi9ie8"></div>
            <div class="image_box" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2vs2Yi0pObR24br0K1Aj6MieJM1-lWOd7X9opMhIwf9yi9ie8"></div>
            <div class="image_box" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2vs2Yi0pObR24br0K1Aj6MieJM1-lWOd7X9opMhIwf9yi9ie8"></div>
        </div>
    </div>
</body>

HTML / CSS - 如何在div中排列我的href图片？

2 个答案: