Question

我只希望较大的图像显示在左侧，而较小的图像（网格布局-此部分中的repeat（2，1fr））在右侧对齐。

但是这样显示。

https://i.stack.imgur.com/S76jN.png

总共有七个小图像和一个大图像。我只是想使用HTML CSS JS对图片库进行编码。

.container {
    width: 100%;
}

.main-img img{
    display: inline-block;
    width: 70%;
}

.images img {
    float: right;
    width: 30%;
}

.images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
}

<div class="container">
        <div class="main-img">
            <img src="https://images.pexels.com/photos/264109/pexels-photo-264109.jpeg?cs=srgb&dl=baby-children-cute-264109.jpg&fm=jpg">
        </div>
        <div class="images">
            <img src="https://images.pexels.com/photos/35537/child-children-girl-happy.jpg?cs=srgb&dl=adorable-beautiful-boy-35537.jpg&fm=jpg">
            <img src="https://images.pexels.com/photos/708440/pexels-photo-708440.jpeg?cs=srgb&dl=beard-bonding-community-708440.jpg&fm=jpg">
            <img src="https://images.pexels.com/photos/35188/child-childrens-baby-children-s.jpg?cs=srgb&dl=boy-brother-child-35188.jpg&fm=jpg">
            <img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?cs=srgb&dl=alone-clouds-golden-hour-670720.jpg&fm=jpg">
        </div>
    </div>

请帮助我解决这个问题。

Answer 1

问题是您没有正确设置宽度。您应该在包装纸上设置宽度。另外，不要忘了使用Float:left来使图像成一行。我已从img元素中删除了float:right和display:inline-block，因为它们不是必需的，请考虑以下示例：

.container {
    width: 100%;
}

.main-img{
width:70%;
float:left;
}
.main-img img{
width:100%
}

.images img {
    width: 100%;
}

.images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
}

<div class="container">
        <div class="main-img">
            <img src="https://images.pexels.com/photos/264109/pexels-photo-264109.jpeg?cs=srgb&dl=baby-children-cute-264109.jpg&fm=jpg">
        </div>
        <div class="images">
            <img src="https://images.pexels.com/photos/35537/child-children-girl-happy.jpg?cs=srgb&dl=adorable-beautiful-boy-35537.jpg&fm=jpg">
            <img src="https://images.pexels.com/photos/708440/pexels-photo-708440.jpeg?cs=srgb&dl=beard-bonding-community-708440.jpg&fm=jpg">
            <img src="https://images.pexels.com/photos/35188/child-childrens-baby-children-s.jpg?cs=srgb&dl=boy-brother-child-35188.jpg&fm=jpg">
            <img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?cs=srgb&dl=alone-clouds-golden-hour-670720.jpg&fm=jpg">
        </div>
    </div>

将图像对准主图像的右边

1 个答案: