Как растянуть 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;
}

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

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

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 Автор вопроса

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

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

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

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

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

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

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

HTML

+1 ещё

Простой
Как сделать одинаковую высоту у карточек?
- 1 подписчик
- 34 минуты назад
- 23 просмотра
0

ответов
HTML

+1 ещё

Простой
Как внизу блока сделать маску волной и поместить туда изображение?
- 2 подписчика
- 5 часов назад
- 28 просмотров
0

ответов
CSS

+1 ещё

Средний
Веб форма: появилось свойство blur, как исправить на битриксе УС?
- 1 подписчик
- 7 часов назад
- 17 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 12 часов назад
- 46 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- вчера
- 80 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Почему window.scrollTo(0, document.body.scrollHeight); не работает?
- 1 подписчик
- 24 дек.
- 63 просмотра
0

ответов
CSS

Средний
Возможен ли отступ только второй строки CSS clamp?
- 1 подписчик
- 23 дек.
- 73 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 23 дек.
- 68 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать блок такой же формы?
- 1 подписчик
- 23 дек.
- 130 просмотров
1

ответ
HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 23 дек.
- 128 просмотров
1

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

Верстальщик HTML

MST

от 450 $

Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер

BYTIME

от 130 000 ₽

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

Разработка Roguelike-игры на Unity для Android

26 дек. 2024, в 01:11

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

Доработка веб-платформы на PHP

26 дек. 2024, в 00:27

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

Нарисовать обложку для рекламной кампании в VK Ads

25 дек. 2024, в 22:59

1000 руб./в час

Если это работа для себя, то я рекомендовал бы не растягивать на всю ширину экрана, а просто увеличить размер контейнера для данной секции. например у вас .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 блока на всю ширину?

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

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

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