Выровнять по левому краю

@mariammm · Регистрация: 24.09.2019

Студворк — интернет-сервис помощи студентам

Должно происходить выравнивание по левому краю, но так понимаю, что моя вариация не подходит.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
async function changeContentWithDelay(contentBlocksNames, delay = 0)
{
    let blocksHtml = [];
    contentBlocksNames.forEach(block => {
        blocksHtml.push(document.querySelector(block).innerHTML);
    });
    await sleep(delay);
    document.querySelector(contentBlocksNames[0]).innerHTML = blocksHtml[2];
    document.querySelector(contentBlocksNames[1]).innerHTML = blocksHtml[0];
    document.querySelector(contentBlocksNames[2]).innerHTML = blocksHtml[1];
    await sleep(delay);
    document.querySelector(contentBlocksNames[0]).innerHTML = blocksHtml[1];
    document.querySelector(contentBlocksNames[1]).innerHTML = blocksHtml[2];
    document.querySelector(contentBlocksNames[2]).innerHTML = blocksHtml[0];
    await sleep(delay);
    document.querySelector(contentBlocksNames[0]).innerHTML = blocksHtml[0];
    document.querySelector(contentBlocksNames[1]).innerHTML = blocksHtml[1];
    document.querySelector(contentBlocksNames[2]).innerHTML = blocksHtml[2];
    setInterval(()=>{
        if(a == 1) {document.querySelector('#section-2').align = 'align: left;'; a = 0;}
        else       {document.querySelector('#section-2').align = 'align: center;'; a = 1;}
    }, delay);
}

Как улучшить это? Чтобы выравнивалось

JavaScript
1
2
 if(a == 1) {document.querySelector('#section-2').align = 'align: left;'; a = 0;}
        else       {document.querySelector('#section-2').align = 'align: center;'; a = 1;}

@web_coder2 · 15.11.2020, 17:35

Здравствуйте mariammm,

Нужно видеть разметку так как системы компоновки элементов разные и выравнивать в них нужно по разному.

@mariammm · 15.11.2020, 17:43 **[ТС]**

Сообщение от web_coder2

Здравствуйте mariammm,
Нужно видеть разметку так как системы компоновки элементов разные и выравнивать в них нужно по разному.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.downblock {
    width: 100%;
    height: 80%;
    display: flex;
    text-align: center;
 
    background-color: #FDEADA;
}
 
#section-2
{
    margin: auto;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
            <div class ="downblock" >
                <div id="section-2">
                    <h3 >Меню</h3>
                    <ol >
                    <li><a href="cats.html">Page 2</a></li>
                    <li><a href="cats1.html">Page 3</a></li>
                    <li><a href="cats3.html">Page 4</a></li>
                    <li><a href="cats4.html">Page 5</a></li>
                    </ol>
 
                </div>
 
            </div>

@web_coder2 · 15.11.2020, 18:07

Если я вас правильно понял, вы хотите весь список слева на все странице или конкретный какой то элемент. Можете наривать в паинте

а так попробуйте это

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.downblock {
    width: 100%;
    height: 80%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    text-align: center;
    background-color: #FDEADA;
}
#section-2
{
    //margin: auto;
}

Добавлено через 2 минуты
Есть отличная статья по компоновке flex с примерами Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки.

Не по теме:

Как же она жадно кусает я аж проголодался

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@web_coder2 755 / 359 / 100 Регистрация: 04.10.2018 Сообщений: 548
	15.11.2020, 17:35
	Здравствуйте mariammm, Нужно видеть разметку так как системы компоновки элементов разные и выравнивать в них нужно по разному. 0