Question

我正在尝试将图像放置在帖子内部，以使第一幅图像占据第一列和第二行，第二幅图像占据第二列和第一行，第三幅图像占据第二列，第二行。我正在使用CSS网格来尝试完成此任务。第一个问题是图像远远超出了图像容器以及其他容器。第二个问题是第二行中的第三张图像被推到前两个图像的下方。换句话说，第三张图像不在前两张图像的正下方，但是有一个空格。另外，另一个问题是图像容器向下延伸到内部后容器的范围之外。

请帮助我解决这些问题。谢谢！

我试图通过搜索Google上的所有链接来解决此问题，但无法提出解决方案。

<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid Forum Post One</title>
    <link rel="stylesheet" type="text/css" href="CSSGridForumPostOneStyle.css">
</head>
<body>
    <div class="main-container">
        <div class="post-container">
            <div class="inner-post-container">
            <div class="content-container">    
                <div class="profileImg-container">
                    <img class="profileImg" src="default3.png" alt="profilePicture">
                </div>
                <div class="data-container">
                    <div class="title-container">
                       <h1>This is the title.</h1>
                    </div>
                    <div class="price-container">
                       <h2>$1000</h2>
                    </div>
                    <div class="uid-container">
                       <h3>MyUsername</h3>
                    </div>
                    <div class="date-container">
                        <h4>2019-09-4 12:49:43</h4>
                    </div>
                </div>
            </div>
                <div class="paragraph-container">
                  <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque tempora incidunt magnam distinctio quod sit illum at, ipsa consequatur perspiciatis, dicta atque exercitationem ut dolorem et, iste consequuntur vel officiis!</p1>
                </div>                 
                <div class="images-container">
                    <div class="img1-container">
                        <img class="img1" src="" alt="img1">
                    </div>
                    <div class="img2-container">
                        <img class="img2" src="" alt="img2">
                    </div>
                    <div class="img3-container">
                        <img class="img3" src="" alt="img3">
                    </div>
                </div>
             </div>
        </div>
    </div>
</body>

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main-container {
background-color: #eee;
}
.inner-post-container {
margin: 0 auto;
width: 500px;
height: 600px;
background-color: white;
margin: 20px auto 20px auto;
border-color: red; /*   #808080;*/
border-width: 0.5px;
border-style: solid;
padding: 10px;
}
.content-container {
display: grid;
grid-template-columns: 1fr 4fr;
border: green 1px solid;
}
.paragraph-container {
padding-top: 7px;
}
.profileImg {
border-radius: 50%;
height: 100px;
padding-right: 5px;
}
h1 {
font-size: 20px;
padding-top: 5px;
}
h2 {
font-size: 18px;
padding: 5px 5px 5px 0;
}
h3 {
font-size: 13px;
}
h4 {
font-size: 13px;
}
.images-container {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 1fr 1fr;
border: 1px blue solid;
}
.img {
max-width: 100%;
max-height: 100%;
}

我希望第一张图像占据容器的第一列和前两行，第二张图像占据容器的第二列和第一行，第三张图像占据第二列，并且容器的第二行。这些图像太大了，而第三幅图像被向下推。

CSS网格图像溢出容器

0 个答案: