将图像对齐到主图像的右侧

Question

我只希望大图像显示在左侧，而较小的图像（网格布局 - repeat(2, 1fr) in this fraction）显示在右侧。

但是显示是这样的

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>

将图像对齐到主图像的右侧

Align images to right of the main image

html

javascript

css

image-gallery