@ThomasScott

Почему в первом столбце элементы не по порядку, как исправить?

Используя только HTML + CSS
В дальнейшем эта страница должна быть адаптивной, по этому задание определенных размеров не приветствуется =/
И что вообще я делаю не так ? буду рад услышать обоснованную критику.
Код можно посмотреть тут

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="header-content">Nagluwek</div>
    </header>
    <div class="main-conteiner">
        <div class="conteiner-content">
            <div class="column1">
                <span class="column1-block1">Plywajacy tekst</span>
                <span class="column1-block2">NIEplywajaca grafica 400x100</span>
                <span class="column1-block3">
                    <ul>
                        <li>Plywajacy tekst2</li>
                        <li>Plywajacy tekst2</li>
                        <li>Plywajacy tekst2</li>
                        <li>Plywajacy tekst2</li>
                        <li>Plywajacy tekst2</li>
                    </ul>
                </span>   
            </div>
            <div class="column2">
                <span class="column2-block1">Dlugi tekst na goze, Dlugi tekst na gorze, Dlugi tekst na gorze Dlugi tekst na gorze</span>
                <span class="column2-block2">Tekst o rozniej dlugosci na dole</span>   
            </div>
            <div class="column3">
                <span class="block1">Grafica 400x600</span>  
            </div>
            <div class="column4">
                <span class="block1">Bardzo dluga tresc zamsze wysrodkowana</span>  
            </div>
        </div>
    </div>
    <footer>
        <div class="footer-content">Stopka wysoka na 1000px</div>
    </footer>
</body>
</html>


*{
    margin: 0;
    padding: 0;
    color: white;
    box-sizing: border-box;
}
body, html {
    width: 100%;
    height: 100%;
}

header {
    width: 100%;
    text-align: left;
    height: 30px;
    background-color: green;
}

.header-content {
    padding-top: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 1400px;
    
}


.main-conteiner {
    width: 1400px;
    margin-left: auto;
    margin-right: auto;
    background-color: gray;
}

.conteiner-content {
    display: inline-flex;
    height: 100%;
}

.column1 {
    width: 400px;
    background-color: #ffe600;
    display: grid;
}

.column2 {
    width: 300px;
    height: 100%;
}

.column3 {
    width: 400px;
    height: 600px;
}

.column4 {
    width: 300px;
    height: 100%;
}

.column1-block1 {
    position: fixed;
    background-color: #aaaaaa;
    width: 400px;
}

.column1-block2 {
    margin-top: 18px;
    padding-top: 5px;
    width: 100%;
    height: 100px;
    background-color: #d4d4d4
}

.column1-block3 {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 3px;
    background-color: #5d6781;
}

footer {
    width: 100%;
    height: 150px;
    max-height: 1000px;
    background-color: black;
}

.footer-content {
    padding-top: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 1400px;
}
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
lamer350
@lamer350
กำลังสูงสุด
У вас все по порядку, просто вы применили сетку тут:
.column1 {
display: grid;
}

а по умолчанию для grid элементы разлетаются по углам, подробнее почитайте тут: https://html5book.ru/css-grid/#terminology

PS. Так же вы злоупотребляете span, так делать нельзя. Тег предназначен для строчных елементов, им можно обернуть текст например, но не вставлять внутрь список...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы