HTML [HELP] Как сделать столбцы друг с другом?

U

Unusual man forget email

Участник
Автор темы
47
19
Как сделать, чтобы сначала шёл "Понедельник" потом "Вторник" и т.п, у меня они друг под другом расположены...
1685688679149.png
 
Сортировка по дате Сортировка по голосам
U

Unusual man forget email

Участник
Автор темы
47
19
norrthh написал(а):
CSS: 
.block {
    display:flex;
}
Нажмите для раскрытия...
1685723024806.png


Index.html: 
<!DOCTYPE html>
<title>Расписание 9Б</title>
<link rel="stylesheet" href="style.css">
<body>
        <div class="block">
        <img class="M" src="https://kartinkof.club/uploads/posts/2022-05/1652394432_23-kartinkof-club-p-kartinki-ponedelnik-na-angliiskom-24.jpg">
    <h3 class="Monday">Понедельник</h3>
    <p><strong>1:</strong>
            <input maxlength="25" size="12" name="first lesson"></p>
    <p><strong>2:</strong>
            <input maxlength="25" size="12" name="two lesson"></p>
    <p><strong>3:</strong>
            <input maxlength="25" size="12" name="three lesson"></p>
    <p><strong>4:</strong>
            <input maxlength="25" size="12" name="four lesson"></p>
    <p><strong>5:</strong>
            <input maxlength="25" size="12" name="five lesson"></p>
    <p><strong>6:</strong>
            <input maxlength="25" size="12" name="six lesson"></p>
    <p><strong>7:</strong>
            <input maxlength="25" size="12" name="seven lesson"></p>
    <p><strong>8:</strong>
            <input maxlength="25" size="12" name="eight lesson"></p>

            <script language="JavaScript">
                alert("Хочешь увидеть расписание 9Б?");
            </script>

        <img class="T" src="https://i.pinimg.com/736x/39/ae/a9/39aea9af02df50875f456a4caaf908fc.jpg">
    <h3 class="Tuesday">Вторник</h3>
     <p><strong>1:</strong>
                    <input maxlength="25" size="12" name="first lesson"></p>
            <p><strong>2:</strong>
                    <input maxlength="25" size="12" name="two lesson"></p>
            <p><strong>3:</strong>
                    <input maxlength="25" size="12" name="three lesson"></p>
            <p><strong>4:</strong>
                    <input maxlength="25" size="12" name="four lesson"></p>
            <p><strong>5:</strong>
                    <input maxlength="25" size="12" name="five lesson"></p>
            <p><strong>6:</strong>
                    <input maxlength="25" size="12" name="six lesson"></p>
            <p><strong>7:</strong>
                    <input maxlength="25" size="12" name="seven lesson"></p>
            <p><strong>8:</strong>
                    <input maxlength="25" size="12" name="eight lesson"></p>

        <img class="W" src="https://d2bzx2vuetkzse.cloudfront.net/fit-in/0x450/unshoppable_producs/029658dd-c98f-480c-91cc-5bbe7f89837a.png">
     <h3 class="Wednesday">Среда</h3>
                <p><strong>1:</strong>
                <input maxlength="25" size="12" name="first lesson"></p>
                <p><strong>2:</strong>
                <input maxlength="25" size="12" name="two lesson"></p>
                <p><strong>3:</strong>
                <input maxlength="25" size="12" name="three lesson"></p>
                <p><strong>4:</strong>
                <input maxlength="25" size="12" name="four lesson"></p>
                <p><strong>5:</strong>
                <input maxlength="25" size="12" name="five lesson"></p>
                <p><strong>6:</strong>
                <input maxlength="25" size="12" name="six lesson"></p>
                <p><strong>7:</strong>
                <input maxlength="25" size="12" name="seven lesson"></p>
                <p><strong>8:</strong>
                <input maxlength="25" size="12" name="eight lesson"></p>
        </div>
</body>

style.css: 
.Monday,.M {
    border-radius: 5px;
    background-color: greenyellow;
    font-style: italic;
    width: 108px;
}
.Tuesday {
    border-radius: 5px;
    background-color: greenyellow;
    font-style: italic;
    width: 80px;
}
.W {
    height: 100px;
}
.T {
    height: 160px;
    width: 100px;
}
.Wednesday {
    border-radius: 5px;
    background-color: gray;
    font-style: italic;
    width: 50px;
}

Планируется как то так
 

Вложения

  • Безымянный.png
    Безымянный.png
    42.2 KB · Просмотры: 18
Последнее редактирование:
Позитивный голос 0 Негативный голос
norrthh

norrthh

Известный
280
102
Какой бред ты скинул, вот рабочий вариант. В style.css предоставил два варианта, как можно реализовать это)

1685730530132.png



index.html: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <div class="block">
        <div>
            <img class="M"
                 src="https://kartinkof.club/uploads/posts/2022-05/1652394432_23-kartinkof-club-p-kartinki-ponedelnik-na-angliiskom-24.jpg">
            <h3 class="Monday">Понедельник</h3>
            <p><strong>1:</strong>
                <input maxlength="25" size="12" name="first lesson"></p>
            <p><strong>2:</strong>
                <input maxlength="25" size="12" name="two lesson"></p>
            <p><strong>3:</strong>
                <input maxlength="25" size="12" name="three lesson"></p>
            <p><strong>4:</strong>
                <input maxlength="25" size="12" name="four lesson"></p>
            <p><strong>5:</strong>
                <input maxlength="25" size="12" name="five lesson"></p>
            <p><strong>6:</strong>
                <input maxlength="25" size="12" name="six lesson"></p>
            <p><strong>7:</strong>
                <input maxlength="25" size="12" name="seven lesson"></p>
            <p><strong>8:</strong>
                <input maxlength="25" size="12" name="eight lesson"></p>
        </div>

        <script language="JavaScript">
            alert("Хочешь увидеть расписание 9Б?");
        </script>

        <div>
            <img class="T" src="https://i.pinimg.com/736x/39/ae/a9/39aea9af02df50875f456a4caaf908fc.jpg">
            <h3 class="Tuesday">Вторник</h3>
            <p><strong>1:</strong>
                <input maxlength="25" size="12" name="first lesson"></p>
            <p><strong>2:</strong>
                <input maxlength="25" size="12" name="two lesson"></p>
            <p><strong>3:</strong>
                <input maxlength="25" size="12" name="three lesson"></p>
            <p><strong>4:</strong>
                <input maxlength="25" size="12" name="four lesson"></p>
            <p><strong>5:</strong>
                <input maxlength="25" size="12" name="five lesson"></p>
            <p><strong>6:</strong>
                <input maxlength="25" size="12" name="six lesson"></p>
            <p><strong>7:</strong>
                <input maxlength="25" size="12" name="seven lesson"></p>
            <p><strong>8:</strong>
                <input maxlength="25" size="12" name="eight lesson"></p>
        </div>

        <div>
            <img class="W"
                 src="https://d2bzx2vuetkzse.cloudfront.net/fit-in/0x450/unshoppable_producs/029658dd-c98f-480c-91cc-5bbe7f89837a.png">
            <h3 class="Wednesday">Среда</h3>
            <p><strong>1:</strong>
                <input maxlength="25" size="12" name="first lesson"></p>
            <p><strong>2:</strong>
                <input maxlength="25" size="12" name="two lesson"></p>
            <p><strong>3:</strong>
                <input maxlength="25" size="12" name="three lesson"></p>
            <p><strong>4:</strong>
                <input maxlength="25" size="12" name="four lesson"></p>
            <p><strong>5:</strong>
                <input maxlength="25" size="12" name="five lesson"></p>
            <p><strong>6:</strong>
                <input maxlength="25" size="12" name="six lesson"></p>
            <p><strong>7:</strong>
                <input maxlength="25" size="12" name="seven lesson"></p>
            <p><strong>8:</strong>
                <input maxlength="25" size="12" name="eight lesson"></p>
        </div>
    </div>
</body>
</html>


style.css: 
.Monday,.M {
    border-radius: 5px;
    background-color: greenyellow;
    font-style: italic;
    width: 108px;
}
.Tuesday {
    border-radius: 5px;
    background-color: greenyellow;
    font-style: italic;
    width: 80px;
}
.W {
    height: 100px;
}
.T {
    height: 160px;
    width: 100px;
}
.Wednesday {
    border-radius: 5px;
    background-color: gray;
    font-style: italic;
    width: 50px;
}

/*.block {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(3, minmax(0, 1fr));*/
/*}*/

.block {
    display: flex;
    gap: 50px;
}
 
Позитивный голос 0 Негативный голос
U

Unusual man forget email

Участник
Автор темы
47
19
norrthh написал(а):
Какой бред ты скинул, вот рабочий вариант. В style.css предоставил два варианта, как можно реализовать это)

Посмотреть вложение 203459


index.html: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <div class="block">
        <div>
            <img class="M"
                 src="https://kartinkof.club/uploads/posts/2022-05/1652394432_23-kartinkof-club-p-kartinki-ponedelnik-na-angliiskom-24.jpg">
            <h3 class="Monday">Понедельник</h3>
            <p><strong>1:</strong>
                <input maxlength="25" size="12" name="first lesson"></p>
            <p><strong>2:</strong>
                <input maxlength="25" size="12" name="two lesson"></p>
            <p><strong>3:</strong>
                <input maxlength="25" size="12" name="three lesson"></p>
            <p><strong>4:</strong>
                <input maxlength="25" size="12" name="four lesson"></p>
            <p><strong>5:</strong>
                <input maxlength="25" size="12" name="five lesson"></p>
            <p><strong>6:</strong>
                <input maxlength="25" size="12" name="six lesson"></p>
            <p><strong>7:</strong>
                <input maxlength="25" size="12" name="seven lesson"></p>
            <p><strong>8:</strong>
                <input maxlength="25" size="12" name="eight lesson"></p>
        </div>

        <script language="JavaScript">
            alert("Хочешь увидеть расписание 9Б?");
        </script>

        <div>
            <img class="T" src="https://i.pinimg.com/736x/39/ae/a9/39aea9af02df50875f456a4caaf908fc.jpg">
            <h3 class="Tuesday">Вторник</h3>
            <p><strong>1:</strong>
                <input maxlength="25" size="12" name="first lesson"></p>
            <p><strong>2:</strong>
                <input maxlength="25" size="12" name="two lesson"></p>
            <p><strong>3:</strong>
                <input maxlength="25" size="12" name="three lesson"></p>
            <p><strong>4:</strong>
                <input maxlength="25" size="12" name="four lesson"></p>
            <p><strong>5:</strong>
                <input maxlength="25" size="12" name="five lesson"></p>
            <p><strong>6:</strong>
                <input maxlength="25" size="12" name="six lesson"></p>
            <p><strong>7:</strong>
                <input maxlength="25" size="12" name="seven lesson"></p>
            <p><strong>8:</strong>
                <input maxlength="25" size="12" name="eight lesson"></p>
        </div>

        <div>
            <img class="W"
                 src="https://d2bzx2vuetkzse.cloudfront.net/fit-in/0x450/unshoppable_producs/029658dd-c98f-480c-91cc-5bbe7f89837a.png">
            <h3 class="Wednesday">Среда</h3>
            <p><strong>1:</strong>
                <input maxlength="25" size="12" name="first lesson"></p>
            <p><strong>2:</strong>
                <input maxlength="25" size="12" name="two lesson"></p>
            <p><strong>3:</strong>
                <input maxlength="25" size="12" name="three lesson"></p>
            <p><strong>4:</strong>
                <input maxlength="25" size="12" name="four lesson"></p>
            <p><strong>5:</strong>
                <input maxlength="25" size="12" name="five lesson"></p>
            <p><strong>6:</strong>
                <input maxlength="25" size="12" name="six lesson"></p>
            <p><strong>7:</strong>
                <input maxlength="25" size="12" name="seven lesson"></p>
            <p><strong>8:</strong>
                <input maxlength="25" size="12" name="eight lesson"></p>
        </div>
    </div>
</body>
</html>


style.css: 
.Monday,.M {
    border-radius: 5px;
    background-color: greenyellow;
    font-style: italic;
    width: 108px;
}
.Tuesday {
    border-radius: 5px;
    background-color: greenyellow;
    font-style: italic;
    width: 80px;
}
.W {
    height: 100px;
}
.T {
    height: 160px;
    width: 100px;
}
.Wednesday {
    border-radius: 5px;
    background-color: gray;
    font-style: italic;
    width: 50px;
}

/*.block {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(3, minmax(0, 1fr));*/
/*}*/

.block {
    display: flex;
    gap: 50px;
}
Нажмите для раскрытия...
Что-то у меня ничего не получается...
 
Позитивный голос 0 Негативный голос
U

Unusual man forget email

Участник
Автор темы
47
19
norrthh написал(а):
Посмотреть вложение 203517Просто скачай и разархивируй
Нажмите для раскрытия...
1685803372797.png
1685803393975.png

Попробовал вставить в папку с проектом, попробовал открыть через блокнот и вставить, выходит почему то исходный результат

С кодом который ты скинул просто через код в bh, у меня выходит точно также
 
Позитивный голос 0 Негативный голос
U

Unusual man forget email

Участник
Автор темы
47
19
norrthh написал(а):
Очисти кэш, ctrl f5 or ctrl fn f5
Нажмите для раскрытия...
Очистил кэш в браузере - перезапуск и снова тоже самое, очистил кэш в visual studio code - запуск с браузера, ошибка localhost, ввёл патч index.html в поиск, тоже самое
 
Позитивный голос 0 Негативный голос
U

Unusual man forget email

Участник
Автор темы
47
19
norrthh написал(а):
Я тебе ZIP архив скинул, попробуй его распокавать и открыть index.html там
Нажмите для раскрытия...
Ахахах лять

Там просто ошибка в style.css была, ты "/style.css" написал просто

Всё работает, спасибо большое
 
Позитивный голос 0 Негативный голос
Войдите или зарегистрируйтесь для ответа.

Похожие темы

  1. A
    • Закрыта
    • Вопрос
    Другая игра  Как снять бан по ЖЕЛЕЗУ вф
    Ответы
    9
    Просмотры
    2K
    Помощь
    Ren_Boyko
    Ren_Boyko
  2. U
    • Закрыта
    [HELP] Как узнать id объектов через sobeit
    Ответы
    2
    Просмотры
    6K
    Архив
    MISTER_GONWIK
    MISTER_GONWIK
  3. Tishagen
    • Вопрос
    Как запустить самп с двух аккаунтов?
    Ответы
    8
    Просмотры
    2K
    Помощь
    Unnecess4ry
    Unnecess4ry
  4. Сheesecake
    • Вопрос
    Как сделать подсказку (?) с другой стороны?
    Ответы
    3
    Просмотры
    804
    Вопросы
    Сheesecake
    Сheesecake
  5. W
    • Вопрос
    Как использовать круги а не стрелки в Steam link?
    Ответы
    0
    Просмотры
    333
    Помощь
    Wtch
    W
Сверху Снизу