Как растянуть 2 блока на всю ширину?

Question

Виталий @vitsen777

Как растянуть 2 блока на всю ширину?

Как растянуть 2 этих блока на всю ширину при помощи флексов?
У меня получается так:

<div class="album-col">
            <div class="album-it">
                <h2 class="album-title">featured album</h2>
            </div>
            
            <div class="album-it">
                <a href="#"><img src="img/HUGO_Free-Landing-Page_03.jpg" alt="BEAT"></a>
            </div>
        </div>

.album-col{
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.album-it{
    width: 720px;
    height: 480px;
    
    
}

.album-title{
    font-size: 48px;
    
    text-transform: capitalize;
    color: #252525;
    
    font-weight: lighter;
}

Результат должен быть такой:

Вопрос задан более трёх лет назад
2583 просмотра

1 комментарий

Подписаться 1 Средний 1 комментарий

Решения вопроса 2

9 комментариев

Виталий @vitsen777 Автор вопроса

Блин, расстояние конечно помогло между блоками сократить, но растянуть на весь экран не получается

Написано более трёх лет назад
bbquite @WebDev921

Виталий, можешь дать ссылку на проект или делаешь локально?

Написано более трёх лет назад
Виталий @vitsen777 Автор вопроса

Сейчас быстренько перенесу в песочницу

Написано более трёх лет назад

Виталий @vitsen777 Автор вопроса

Блин, не могу, у меня там одни картинки практически

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
    <title>HUGO</title>
</head>
<body>
    
    <div class="header">
      <div class="nav">
      <div class="navigation">
             <a href="#" class="ico"><img src="img/3.png" alt="ico"></a>
               
              <a href="#" class="ico"><img src="img/2.png" alt="ico"></a> 
               
              <a href="#" class="ico"><img src="img/1.png" alt="ico"></a>
            
            
              <a href="#" class="logo"><img src="img/logo.png" alt="logo"></a> 
              
              <a href="#" class="bur"><img src="img/menu.png" alt="burger"></a>
              
                 
        </div>
        </div>
        
        <div class="container">
            <img src="img/f_ckingjump.png" alt="" class="img-con"> 
            
            
        </div>
    </div>
    
    
    <div class="body">
        <div class="album-col">
            <div class="album-it">
                <h2 class="album-title">featured album</h2>
            </div>
            
            <div class="album-it">
                <a href="#"><img src="img/HUGO_Free-Landing-Page_03.jpg" alt="BEAT"></a>
            </div>
        </div>
        
        

    </div>
</body>
</html>

*,
*::after,
*::before{
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6{
    margin: 0;
}

body{
    margin: 0;
    
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
}

/* Container */

.container{
    width: 100%;
    max-width: 1170px;
    
    margin: 0 auto;
}

/* Nav */

.nav{
    background-color: #fff;
    
    width: 100%;
}

.navigation{
    width: 100%;
    max-width: 1170px;
    background-color: #fff;
    
    padding: 15px 0;
    
    position: relative;
    
    margin: 0 auto;
    
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.logo{
    margin: 0 auto;
}

.ico{
    margin-right: 30px;
}

.bur{
    margin-left: 60px;
}

/* Header */

.header{
    width: 100%;
    height: 100vh;
    
    background: url(../img/HUGO_Free-Landing-Page_02.jpg) no-repeat;
    background-size: cover;
}

.img-con{
    margin: 260px 180px;
}

/* Body */

.body{
    width: 100%;
    
}

.album-col{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.album-it{
    height: 480px;
    
    
    flex: 1 0 auto;
}

.album-title{
    font-size: 48px;
    
    text-transform: capitalize;
    color: #252525;
    
    font-weight: lighter;
}

Написано более трёх лет назад

bbquite @WebDev921

Виталий, тебе нужно чтобы ширина этого блока была на всю ширину страницы и при этом чтобы внутренние блоки были одинаковой ширины?

Написано более трёх лет назад
Виталий @vitsen777 Автор вопроса

Да

Написано более трёх лет назад
bbquite @WebDev921

Виталий, попробуй вместо класса container использовать container-fluid

Написано более трёх лет назад
bbquite @WebDev921

или убери в стилях максимальную ширину

.container{
width: 100%;
max-width: 1170px;
margin: 0 auto;
}

из за этого и не на весь экран

Написано более трёх лет назад
Виталий @vitsen777 Автор вопроса

Алексей, Спасибо, все сработало

Написано более трёх лет назад

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+3 ещё

Простой
Как сделать чтобы при нажатии на кнопку или сылку в div блоке открывалась галерея?
- 1 подписчик
- 7 минут назад
- 9 просмотров
0

ответов
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 1 подписчик
- 3 часа назад
- 77 просмотров
1

ответ
CSS

Средний
Почему у элемента такое поведение?
- 3 подписчика
- 14 часов назад
- 1071 просмотр
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- 16 часов назад
- 56 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- 20 часов назад
- 155 просмотров
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- 20 часов назад
- 57 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 2 подписчика
- 21 час назад
- 147 просмотров
1

ответ
CSS

Простой
Почему не сужается flex-элемент с flex-shrink: 1?
- 1 подписчик
- 22 часа назад
- 76 просмотров
0

ответов
CSS

+1 ещё

Средний
При сборке webpack картинки из css не открываются?
- 1 подписчик
- вчера
- 82 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- вчера
- 572 просмотра
1

ответ
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Создать дизайн лендинга портфолио на фигме

23 апр. 2024, в 14:09

500 руб./за проект

В wordpress подключить модуль по рассрочке (документацию дам)

23 апр. 2024, в 13:51

4500 руб./за проект

Сохранение постов из телеграм каналов+отправка платящим пользователям

17 апр. 2024, в 16:55

200000 руб./за проект

Если это работа для себя, то я рекомендовал бы не растягивать на всю ширину экрана, а просто увеличить размер контейнера для данной секции. например у вас .container = 1270px; а сделать его = 1920px; тогда на всех экранах до 1920 он будет "на всю ширину". Нет смысла растягивать на всю ширину блоки на больших экранах, выглядит убого.
Вот пример моих слов как сделать:

и как на больших экранах:

Answer 1 · 2019-06-25 13:49:35

bbquite @WebDev921

.album-it{
    height: 480px;
    flex: 1 0 auto;
}

Ответ написан более трёх лет назад

9 комментариев

Answer 2 · 2019-06-25 14:13:13

ⓒⓢⓢ @JRK_DV

Рецепты https://codepen.io/jrkdv/full/LKLXdq

ещё как вариант, на всю страницу
https://codepen.io/anon/pen/dBzoLe

Ответ написан более трёх лет назад

Комментировать

Как растянуть 2 блока на всю ширину?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт