Блоки с процентной и фиксированной шириной в одной строке

@theBork · Регистрация: 15.05.2016

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

Всем привет.

При верстке резинового макета столкнулся с проблемой. В одной строке потребовалось разместить не только блоки с шириной в процентах, но и блок с фиксированной шириной (фотослайдер).

Проблема в том, что по бокам слайдера есть еще несколько блоков, которые будут резиновыми, но они переносятся на новую строку. Не смог найти решение, поэтому решил написать тут. Если ставить классу .box значение display: inline - все отображается на одной строке, но она не ровняется по центру. Дилемма.

HTML5
1
2
3
4
5
6
<div class="string">
    <div class="box">
      <div class="percentwidth"></div>
      <div class="pixelwidth"></div>
    </div>
</div>

Код в css:

CSS
1
2
3
4
5
6
7
8
9
.string {
    position: relative;
    width: 100%;
}
 
.box {
    display: inline-block;
    margin: auto;  //Чтобы было по центру
}

@mrtoxas · 07.06.2016, 09:32

Выложите нормальный код, пусть даже проблемный.
А чтобы блочно-строчные элементы выровнялись по центру, надо задать родителю значение

CSS
1
2
3
.string {
  text-align:center;
}

@TA1ex · 07.06.2016, 10:47

Чтобы box выравнивался по центру, ему нужно задать определенную ширину. В пикселях или процентах

@theBork · 07.06.2016, 18:16 **[ТС]**

Выкладываю ниже проблемный код. Он пока в очень очень черновом варианте, но суть передана. Как видно, "text-align: center" у блока .string есть, но это не помогает выровнять содержимое по центру. Также здесь из блоков построены фигурные скобки, и вот вторая перескакивает на другую строку.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="string">
<div class="box">
    <div class="figure">
        <div class="border" style="border-top:2px solid black; border-left: 2px solid black; border-radius: 15px 0 0 0; float:right"></div>
        <div class="border" style="height:22px; float: right"></div>
        <div class="border" style="height:191px; float:right"></div>
        <div class="border" style="border-right: 2px solid black; height:191px; border-radius: 0 0 10px 0; float:right"></div>
        <div class="border" style="height:191px; float:right"></div>
        <div class="border" style="border-right: 2px solid black; height:191px; border-radius: 0 10px 0 0; float:right"></div>
        <div class="border" style="border-bottom:2px solid black; border-left: 2px solid black; border-radius: 0 0 0 15px; float:right"></div>
        <div class="border" style="float:right"></div>
    </div>
    <div class="empty"></div>
    <div class="sliderbox">
        <ul class="photobox" data-current=0>
            <li class="slide">
                <img src="https://www.cyberforum.ru/images/01.jpg" width="640px">
            </li>
            <li class="slide">
                <img src="https://www.cyberforum.ru/images/02.jpg" width="640px">
            </li>
            <li class="slide">
                <img src="https://www.cyberforum.ru/images/03.jpg" width="640px">
            </li>
        </ul>
    </div>
    <div class="empty"></div>
    <div class="figure">
        <div class="border" style="border-top:2px solid black; border-right: 2px solid black; border-radius: 0 15px 0 0"></div>
        <div class="border" style="height:22px"></div>
        <div class="border" style="height:191px"></div>     
        <div class="border" style="border-left: 2px solid black; height:191px; border-radius: 0 0 0 10px"></div>
        <div class="border" style="height:191px"></div>
        <div class="border" style="border-left: 2px solid black; height:191px; border-radius: 10px 0 0 0"></div>
        <div class="border" style="border-bottom:2px solid black; border-right: 2px solid black; border-radius: 0 0 15px 0"></div>
        <div class="border"></div>
    </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
.string {
    position: relative;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}
.box {
    display: inline-block;
    margin: auto;
}
.sliderbox {
    width: 640px;
    height: 427px;
    overflow: hidden;
    position: relative;
    float: left;
}
.figure {
    width: 50px;
    height: 427px;
    position: relative;
    display: inline;
    overflow: hidden;
    display: table-cell;
    float: left;
}
.border {
    width: 20px;
    height: 20px;
    display: inline;
    position: relative;
    float: left;
}
.empty {
    width: 5%;
    height: 427px;
    display: inline;
    float: left;
    position: relative;
}

@TA1ex · 07.06.2016, 18:32

1. box у вас центрируется нормально
2. Чтобы все было ровно уберите вот эти блоки

HTML5
1
<div class="empty"></div>

Они не несут никакого функционала

@theBork · 07.06.2016, 18:40 **[ТС]**

2. Чтобы все было ровно уберите вот эти блоки <div class="empty"></div> . Они не несут никакого функционала

Тогда встречный вопрос. Между фигурной скобкой и слайдером нужно сделать свободное пространство, которое будет тянуться от ширины страницы. Свойству "margin" значение в процентах не присваивается. Как быть?

@TA1ex · 07.06.2016, 18:45

Почему это не присваивается? Очень даже присваивается

Только тогда желательно все горизонтальные размеры задавать либо полностью в % либо полностью в px.
У блока box ширина не задана, поэтому дочерним блокам не от чего брать %

Блоки с процентной и фиксированной шириной в одной строке

@theBork · 07.06.2016, 18:54 **[ТС]**

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

Почему это не присваивается? Очень даже присваивается

Попробовал, оно присваивается, но при изменении размеров экрана не трансформируется. К тому же опять слетела часть блоков на следующую строку.

@TA1ex · 07.06.2016, 18:58

Блин. Да потому что изменение экрана никак не влияет на величину родительского блока. Должен быть % от ширины, которая в свою очередь также может быть задана в % но уже от body, ширина которого и меняется в зависимости от изменения ширины окна. Если у вас верхний блок не резиновый (т.е. задан в px), то маржины и не будет меняться

А слетает часть блоков, потому что каша из px и % в один ряд

@theBork · 07.06.2016, 19:12 **[ТС]**

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

А слетает часть блоков, потому что каша из px и % в один ряд

Вот как раз об этом я и спрашивал в первом сообщении. Возможно ли расположить в одной строке блок с px и блок с %.

Допустим, если фиксированный блок обернуть в еще один резиновый блок, это поможет?
То есть, в одной строке три % блока, к примеру 25% - 50% - 25%, а внутри 50%-го блока со свойством "overflow: hidden" блок с 400px, к примеру.

Добавлено через 4 минуты

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

А слетает часть блоков, потому что каша из px и % в один ряд

К слову, я вообще на всю эту кашу пошел ради центрирования %-х блоков, потому что при text-align: center они почему-то не центруются.

HTML5
1
2
3
4
5
<div class="string">
        <div class="paperbox"><p>Блок 1</p></div>
        <div class="paperbox"><p>Блок 2</p></div>
        <div class="paperbox"><p>Блок 3</p></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
.string {
    position: relative;
    width: 100%;
    text-align: center;;
}
.paperbox {
    width: 15%;
    height: 300px;
    float: left;
    margin: 50px;
}

@TA1ex · 07.06.2016, 22:33

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

То есть, в одной строке три % блока, к примеру 25% - 50% - 25%, а внутри 50%-го блока со свойством "overflow: hidden" блок с 400px

Ну, ну подумайте логически. Когда вы будете уменьшать размер экрана, то ваш блок 50% в какой-то момент просто не вместит фиксированный блок 400px.
Тут что-то одно. Либо px, либо %. Процент можно вычислить с помощью calc()
Т.е. у одного будет

CSS
1
width: 250px;

а у другого

CSS
1
width: calc(100% - 250px);

Тогда у второго блока % будет высчитываться динамически и никогда не наступит такого момента, что эти два блока не влезут в ширину. Т.к. всегда будет (100% - 250px) + 250px = 100%
Через text-align: center центрируется только текст внутри блока (а также инлайновые блоки, которые имеют свойства текста в данном случае). Соответственно если ширина родителя ограничена, а инлайновые блоки не влазят полностью, то они подобно тексту будут переносится на следующую строку (по моему есть какое-то no-wrap свойство для текста, которое может это предотвратить)

Еще по коду. Не понятно зачем у вас везде накиданы position: relative, если нигде нет внутри position: absolute и свойств top, left.... и т.п. Потом в figure два раза прописано

CSS
1
2
display: inline;
display: table-cell;

Используется в данном случае только последнее написанное правило, первое игнорируется

И вообще, как правило для блока inline не задают ширину и высоту, т.к. это по сути строчный элемент. Возможно там предполагалось inline-block ?

@theBork · 08.06.2016, 06:56 **[ТС]**

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

И вообще, как правило для блока inline не задают ширину и высоту, т.к. это по сути строчный элемент. Возможно там предполагалось inline-block ?

Да, атрибуты "display" там появлялись, когда я пытался разными способами починить слетающие блоки. Еще не подчистил.

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

Ну, ну подумайте логически. Когда вы будете уменьшать размер экрана, то ваш блок 50% в какой-то момент просто не вместит фиксированный блок 400px.
Тут что-то одно. Либо px, либо %. Процент можно вычислить с помощью calc()

Спасибо про calc, не знал, думаю может помочь. А если в одной строке будут px блоки и блоки заданные calc(100%-400px) - не будет каши?

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@TA1ex 120 / 34 / 9 Регистрация: 12.03.2015 Сообщений: 125
	07.06.2016, 10:47
	Чтобы box выравнивался по центру, ему нужно задать определенную ширину. В пикселях или процентах 0

@TA1ex 120 / 34 / 9 Регистрация: 12.03.2015 Сообщений: 125
	07.06.2016, 18:45
	Почему это не присваивается? Очень даже присваивается Только тогда желательно все горизонтальные размеры задавать либо полностью в % либо полностью в px. У блока box ширина не задана, поэтому дочерним блокам не от чего брать % 0

@TA1ex 120 / 34 / 9 Регистрация: 12.03.2015 Сообщений: 125
	07.06.2016, 18:58
	Блин. Да потому что изменение экрана никак не влияет на величину родительского блока. Должен быть % от ширины, которая в свою очередь также может быть задана в % но уже от body, ширина которого и меняется в зависимости от изменения ширины окна. Если у вас верхний блок не резиновый (т.е. задан в px), то маржины и не будет меняться А слетает часть блоков, потому что каша из px и % в один ряд 0