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

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

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

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

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

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

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

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

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

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

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

CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 11 часов назад
- 35 просмотров
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 14 часов назад
- 28 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 14 часов назад
- 90 просмотров
0

ответов
HTML

+1 ещё

Простой
Как разместить елементы с разных блоков чтобы они перекрывали друг друга?
- 1 подписчик
- 17 часов назад
- 47 просмотров
1

ответ
CSS

Простой
Как сделать border со смещением?
- 1 подписчик
- вчера
- 95 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 76 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 19 нояб.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 40 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?
- 1 подписчик
- 19 нояб.
- 101 просмотр
1

ответ
JavaScript

+3 ещё

Средний
Как сделать слайдер на swiper, в котором активный слайд всегда крайний слева?
- 1 подписчик
- 19 нояб.
- 112 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Сверстать десктоп версию сайта в tailwind

22 нояб. 2024, в 06:06

1500 руб./в час

Создать TG бота

22 нояб. 2024, в 06:04

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

Тестирование модуля ElasticSearch через ftp

22 нояб. 2024, в 03:54

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

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

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

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

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