Как расположить текст и картинку рядом, на одной оси?

@Belzer · Регистрация: 31.08.2021

Студворк — интернет-сервис помощи студентам

Здравствуйте, я пытаюсь цель день разместить текст и картинку рядом, не получается, подскажите пожалуйста, что нужно сделать, чтобы код заработал. Спасибо

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
            <div class="flex">
                <div class="item">About Us</div>
                <div class="item"><img height="327px" width="490px" style="background: url(/img/about1.png) no-repeat; width: 100%; 
                 height: auto; border-radius: 10px;"></div>
                <div class="item">
                    <p class="about-description">Our coffee is great because we are the firstpassionate tasters.</p>
                    <p class="about-description1">Sander's has been promoting coffee culture since the early 20th century and has always 
                       been the first to value the quality of its products. Our deep passion for coffee motivates us to create blends that fully 
                       satisfy the needs of true connoisseurs of this extraordinary product. Our many years of experience guarantee not only 
                       the quality, but also the consistency of all Sander's blends.</p>
                    <div class="item2"><img height="327px" width="490px" style="background: url(/img/about2.png) no-repeat; width: 
                        100%; height: auto; border-radius: 10px;"></div>
                    <p class="about-description">Our coffee is greatbecause we know the needs of our customers and their markets.</p>
                    <p class="about-description1">Sander’s has developed a selective loyalty to its customers over the years.The company is 
                      familiar with their habits and the needs of their markets and has developed three specific product lines, each with its own 
                      characteristics:Ho.Re.Ca. Line - Trade Line - Retail LineIn addition, Sander’s establishes a relationship of absolute 
                      fairness and transparency with clients, supporting their business with large investments in advertising.</p>
                </div>
            </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
 
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}
 
.item {
  font-size: 36px;
  font-weight: 600;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
  padding: 25px;
}
 
.item2 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
  padding: px;
}
 
.item:first-child {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  text-align: center;
}
 
.about-description {
  font-size: 22px;
  font-weight: 600;
}
 
.about-description1 {
  font-weight: 500;
  font-size: 22px;
}

@TGreenForest · 09.09.2021, 17:04

По структуре в любом случае одинаково, у нас есть блок внутри которого еще 2 блока с содержимым, последние мы и будем выравнивать:

HTML5
1
2
3
4
5
6
7
8
9
<div class="container">
  <div class="img-block">
    <img src="" alt="">
  </div>
  <div class="text-block">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, facere?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quos dolore blanditiis totam omnis repellat repellendus vero vel voluptatem enim.</p>
  </div>
</div>https://jsfiddle.net/#run

В современной верстке есть 2 актуальных способа при помощи Grid и Flex-box

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Первый вариант через гриды */
.container{
  display: grid;
  grid-template-columns: 4fr 6fr;
  grid-gap: 20px
}
.img-block{
  background-color: #000;
}
/* Второй вариант через флексы */
.container{
  display: flex;
  justify-content: space-between;
}
.img-block{
  width: 40%;
  background-color: red;
}
.text-block{
  padding: 2em;
  width: 60%;
}

@Jeronim · 10.09.2021, 14:17

А вторая картинка с текстом? Тоже интересно.

@mr_dramm · 10.09.2021, 16:58

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
 
<head>
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    .flex {
        --padding: 20px;
        display: flex;
        flex-wrap: wrap;
        width: 60%;
        min-width: 768px;
        margin: 0 auto;
    }
 
    .item {
        flex: 1 1 50%;
    }
 
    .item:nth-child(4n+2){
        padding: var(--padding);
        padding-right: 0;
    }
    .item:nth-child(4n+3){
        padding: var(--padding);
        padding-left: 0;
    }
 
    img {
        display: block;
        height: auto;
        width: 100%;
        background: #000;
    }
    </style>
</head>
 
<body>
    <div class="flex">
        <div class="item img"><img width="600" height="400"></div>
        <div class="item desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam tenetur cupiditate molestiae incidunt modi praesentium tempora quae, adipisci cumque voluptatibus facilis tempore similique iusto, ad mollitia nisi. Neque ipsa, voluptate!</div>
        <div class="item desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam maxime maiores, est officia adipisci in, reprehenderit itaque magni sint officiis, facere aut quasi impedit odio sit architecto repellat, voluptatum dignissimos.</div>
        <div class="item img"><img width="600" height="400"></div>
    </div>
</body>
 
</html>

Добавлено через 4 минуты
или вместо

CSS
1
2
3
4
5
6
7
8
    .item:nth-child(4n+2){
        padding: var(--padding);
        padding-right: 0;
    }
    .item:nth-child(4n+3){
        padding: var(--padding);
        padding-left: 0;
    }

это

CSS
1
2
3
4
5
6
7
8
    .img+.desc{
        padding: var(--padding);
        padding-right: 0;
    }
    .desc+.desc{
        padding: var(--padding);
        padding-left: 0;
    }

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Jeronim 1 / 1 / 0 Регистрация: 21.02.2021 Сообщений: 50
	10.09.2021, 14:17
	А вторая картинка с текстом? Тоже интересно. 0