Совместите изображения справа от основного изображения - PullRequest
Новая
       34

Совместите изображения справа от основного изображения

0 голосов
/ 27 февраля 2019

Я просто хочу, чтобы большое изображение отображалось с левой стороны, а меньшие изображения (разметка сетки - повторите (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>

Пожалуйста, помогите мне решить эту проблему.

1 Ответ

0 голосов
/ 27 февраля 2019

Проблема в том, что вы неправильно устанавливаете ширину.Вы должны установить ширину на обертках.Также не забудьте использовать Float:left для того, чтобы изображения были на одном экране.Я удалил float:right и display:inline-block из элементов img, так как они не нужны, рассмотрим следующий пример: 

.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>
...