@SQLpodavan228

Див занимает слишком много блочного места, как сделать, чтобы занимал ровно столько сколько содержимого?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style/css.css">
</head>

<body>
    <div class="container">
        <div class="head">
            <div class="nav">
                <a href="#" class="navitem" >Главная</a>
                <a href="#" class="navitem" >Блог</a>
                <a href="#" class="navitem" >Контакты</a>
            </div>
        </div>
        <span class="heading">
            Курсы компании "Гарцующий пони"
        </span>
        <div class="cards">

                    <div class="bold1">
                        <span class="headbold1">SEO для начинающих</span>
                        <p class="head2bold1">Иван Иванович</p>
                        <div class="seo">
                            <img src="https://sun9-57.userapi.com/impg/_DpDJRO4BuQ_Y6CWrUBK8icCmFlv4pABUatxLg/5ic4tSbuUKs.jpg?size=326x157&quality=96&sign=bc9770f5dc95750f2e04f899b5cd6fb2&type=album" alt="">
                        </div>
                        <div class="textbold1">
                            <p>Благодаря этому курсу вы научитесь задавливать конкурентов с помощью ссылочной массы, а не качественного контента.</p>
                        </div>
                        <div class="text2bold1">13 февраля 2023</div>
                    </div>  
                    

        </div>

    </div>

</body>

</html>


.container {
    display: flex;
    flex-wrap: wrap;
}

.head {
    width: 100%;
}

.nav>a {
    text-decoration-color: orange;
    color: black;
    text-decoration-thickness: 3px;
    margin-right: 20px;
}


.heading {
    font-weight: bolder;
    font-size: 25px;
    width: 100%;
}



.bold1 {
    display: flex;
    flex-direction: column;
    border-style: solid;
    border-width: 1px;
    max-width: 41%;
    
    
}

.headbold1 {
    margin-left: 20px;
}

.seo {
    margin-left: 20px;
}

.textbold1 {
    margin-left: 20px;
    margin-right: 40px;
}
.head2bold1 {
    display: flex;
    justify-content: end;
    margin-right: 20px;
}

.text2bold1 {
    display: flex;
    justify-content: end;
    margin-right: 20px;
}
.cards {
    display: inline-flex;
}

.bold2 {
    border: 1px solid;
}

.bold3 {
    border: 1px solid
}


Пробовал указать для cards inline-flex, все равно занимает столько же блочного места. При попытке создать еще один див в этом же диве cards, первая таблица начинает растягиваться по мере заполнения второй таблицы.

672f3997de4a4600840273.png

672f39a38c115516053153.jpeg

672f3a78bd6d9327753044.jpeg
  • Вопрос задан
  • 136 просмотров
Решения вопроса 1
alexprime96
@alexprime96
у вас нет базовых представлений о верстке и семантике.
заголовок в h2 тег надо заворачивать.
контейнер должен быть офомлен как контейнер.

посмотрите уроки Дмитрия Лаврика на ютуб.

поправил код - https://codepen.io/alexprime96/pen/jOgQpMY

НО вам надо упорядочить все знания
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Rocket Смоленск
от 80 000 до 130 000 ₽
Wanted. Санкт-Петербург
До 180 000 ₽
move2usajobs.com LLC Лос-Анджелес
от 2 000 до 4 000 $
13 нояб. 2024, в 00:29
1500 руб./в час
13 нояб. 2024, в 00:19
10000 руб./за проект
12 нояб. 2024, в 21:32
3000 руб./в час