Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/7: Рейтинг темы: голосов - 7, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 17.01.2017
Сообщений: 182
1

Разделение блока на равные части

18.03.2022, 23:11. Показов 1298. Ответов 6
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Здравствуйте.

Нужно разделить блок на равные части
HTML5
1
2
3
4
5

<div class="basic_block">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

  body {
            margin: 0;
            padding: 0;
        }
 
        * {
            box-sizing: border-box
        }
 
        .basic_block {
            width: 100%;
            min-width: 1200px;
            height: 850px;
            white-space: nowrap;
            border: 1px dashed #4800FF;
            position: fixed;
        }
 
 
        .block {
            border: 1px dashed #FF1437;
            float: left;
            display: flex;
            align-items: top;
            justify-content: center;
            min-width:300px;
            /*width: 50%;*/
            height: 840px;
        }
Нужно автоматически расставлять ширину блоков, так как их количество генерирует скрипт (два блока 50%, 3 блока 33,3, 4 блока 25 и т д)
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 18.03.2022, 23:11
Ответы с готовыми решениями:

Разделение блока на две части
Нужно разделить один большой блок ( Контент ) , чтобы было отдельно . До - И после чтобы была...

Разделение блока на три части
имеется код: &lt;div class=&quot;content&quot;&gt; &lt;div class=&quot;left&quot;&gt;1&lt;/div&gt; &lt;div...

Разделение массива на равные части
Есть массив vector&lt;int&gt; a = {1,2,3,4,5,6,7,8,9,10}; Необходимо разбить его на три массива...

Разделение текста на равные части
Как сделать программу, которая будет разделать текст на равные части? Например у нас текстовый...

Разделение файла на равные части
Необходимо написать код программы, которая разбивает полученный файл с текстом (пусть его название...

6
Заблокирован
19.03.2022, 00:03 2
Наверное, как-то так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

        .basic_block {
            display: flex;
            flex-direction: row; /* Направление в строку */
            width: 100%;
            min-width: 1200px;
            height: 850px;
            white-space: nowrap;
            border: 1px dashed #4800FF;
            position: fixed;
        }
  
        .block {
            display: flex;
            flex: 1 1 auto; /* Блокам надо позволить расширяться и сжиматься*/
            justify-content: center;
            align-items: top;
            /*float: left; - это-то тут зачем? Мы же на FLEX */ 
            border: 1px dashed #FF1437;
            height: 840px;
            min-width: 300px;
        }
1
0 / 0 / 0
Регистрация: 17.01.2017
Сообщений: 182
19.03.2022, 14:39  [ТС] 3
CSS
1
2
3
4
5
6
7
8
9
10
11
12

        .foto {
            margin-top: 20px;
            border: 1px dashed #00FF4C;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url(pusto.jpg);
            position: fixed;
            min-width: 250px;
            width: 90%;
            height: 550px;
        }
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <div class="basic_block">
 
        <div class="block">
            <div class="foto"></div>
        </div>
 
        <div class="block">
            <div class="foto"></div>
        </div>
        
        <div class="block">
            <div class="foto"></div>
        </div>
        
    </div>
Почему фото не 90 процентов от блока в котором находится, а больше по размеру?
Миниатюры
Разделение блока на равные части  
0
0 / 0 / 0
Регистрация: 17.01.2017
Сообщений: 182
19.03.2022, 14:40  [ТС] 4
Извиняюсь, забыл про position: fixed;
0
0 / 0 / 0
Регистрация: 17.01.2017
Сообщений: 182
20.03.2022, 09:25  [ТС] 5
Всё таки есть косяк, блок с текстом уползает


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    <div class="basic_block">
 
        <div class="block">
            <div class="foto"></div>
            <div class="texts">
                123<br>
                123<br>
                123<br>
                123<br>
                123<br>
            </div>
        </div>
 
        
        
                <div class="block">
            <div class="foto"></div>
            <div class="texts">
                123<br>
                123<br>
                123<br>
                123<br>
                123<br>
            </div>
        </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

        body {
            margin: 0;
            padding: 0;
        }
 
        * {
            box-sizing: border-box
        }
 
 
 
 
        .basic_block {
            display: flex;
            flex-direction: row;
            /* Направление в строку */
            width: 100%;
            min-width: 1200px;
            height: 850px;
            white-space: nowrap;
            border: 1px dashed #4800FF;
            position: fixed;
        }
 
        .block {
            display: flex;
            flex: 1 1 auto;
            /* Блокам надо позволить расширяться и сжиматься*/
            justify-content: center;
            align-items: top;
            border: 1px dashed #FF1437;
            height: 840px;
            min-width: 300px;
        }
 
 
        .foto {
            margin-top: 20px;
            min-width: 300px;
            width: 90%;
            height: 550px;
            border: 1px dashed #00FF4C;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url(pusto.jpg);  
        }
 
 
        .texts {
            margin-top: 580px;
            min-width: 300px;
            width: 90%;
            border: 1px dashed #FF00DC;
            position: fixed;
            height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            text-align: center;
        }
Миниатюры
Разделение блока на равные части  
0
Заблокирован
20.03.2022, 12:19 6
А ты подумай как следует почему так происходит По границам же всё видно, вроде.
0
0 / 0 / 0
Регистрация: 17.01.2017
Сообщений: 182
20.03.2022, 18:27  [ТС] 7
С абсолютным позиционированием понятно, а почему тут смещается блок, непонятно.

Добавлено через 14 минут
Вот такой вариант

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

        body {
            margin: 0;
            padding: 0;
        }
 
        * {
            box-sizing: border-box
        }
 
        .basic_block {
            display: flex;
            flex-direction: row;
            width: 100%;
            min-width: 1200px;
            height: 850px;
            white-space: nowrap;
            border: 1px dashed #4800FF;
            position: fixed;
        }
 
        .block {
            display: flex;
            flex: 1 1 auto;
            align-items: top;
            border: 1px dashed #FF1437;
            height: 840px;
            min-width: 300px;
            flex-direction: column;
            align-items: center;
         
        }
 
 
        .foto {
            margin-top: 20px;
            min-width: 300px;
            width: 90%;
            height: 550px;
            border: 1px dashed #00FF4C;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url(pusto.jpg);
        }
 
        .texts {
            margin-top: 10px;
            min-width: 300px;
            width: 90%;
            height: 250px;
            border: 1px dashed #00FF4C;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            text-align: center;
            font-weight:bold;
        }
0
20.03.2022, 18:27
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 20.03.2022, 18:27
Помогаю со студенческими работами здесь

Разделение массива на две равные части
Заполняю массив размером 20 рандомными числами от 0 до 200. Надо разделить этот массив на две...

Разделение текста в TextBox на равные части
Нужна программа которая разделяет текст в textbox на равные части.И каждая часть заменяется другим...

Разделение списка на равные части и подсчёт среднего в каждой
разделение заданного списка или кортежа на непересекающиеся группы, содержащие по заданному числу...

Алгоритмически вычислить координаты линий, разделяющих Img1 четыре равные части, то есть на две равные части по вертикал
Помогите! Алгоритмически вычислить координаты линий, разделяющих Img1 четыре равные части, то...

Разбить массив на две равные части (или приблизительно равные)
Задали задание. Нужно разбить одномерный массив на две почти равные части(если на равные не...

В нижней части верхнего блока не до конца отображается цвет блока
Всем привет. Возникла такая проблема. Использую DLE 9.7 На сайте в поставил блок с рекламой, но...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru