Форум

sergeo_89 · #1 (**permalink**) 01.07.2014, 15:19

Есть шапка width=1300px
под ней 2 блока:
- width = 22%
- width = 78%,
а между ними полоска размером в 1px, при масштабировании странички второй блок слетает вниз, потому что им не хватает места, Вопрос как можно учесть эту полоску в ширину, чтоб ничего не выпадало

Вариант с версткой через изображение всей ширины контента мне не подходит, блоки динамичны

пробовал считать процент этого пикселя и указать border-width в %, не получается, если надо могу выдать код, может кто втсречался с подобным?

рони · #2 (**permalink**) 01.07.2014, 18:21

sergeo_89,
width: calc(78% - 1px)

krasovsky · #3 (**permalink**) 02.07.2014, 09:47

Самый кроссбраузерный выход - сверстать таблицей, и пожалуй единственный если хочешь сохранять полоску равно1 px. Иначе задавай ее в процентах/либо общая ширина не более 99%

sergeo_89 · #4 (**permalink**) 02.07.2014, 09:53

рони,
Спасибо, в jQuery можно прописать так

$('.content').css('width', '78%').css('width', '-=1.5px');

Только проблему это не решает, при масштабировании в минус , этот пиксель превращается в, 2 а то и в 3 и сдвигает вниз блок с контентом...

sergeo_89 · #5 (**permalink**) 02.07.2014, 10:22

krasovsky,
тогда если использовать табличную верстку, можно ведь только этот самый контент на таблице сделать, а остальное на дивах)

рони · #6 (**permalink**) 02.07.2014, 10:53

sergeo_89,
показали бы макет html сss -- непонятно зачем тут jQuery ?

sergeo_89 · #7 (**permalink**) 02.07.2014, 11:21

рони,
уже разобрался, вставил просто картинкой блок с меню, теперь все хорошо, спасибо

krasovsky · #8 (**permalink**) 02.07.2014, 12:55

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

krasovsky,
тогда если использовать табличную верстку, можно ведь только этот самый контент на таблице сделать, а остальное на дивах)

Конечно

Aetae · #9 (**permalink**) 02.07.2014, 13:20

Блин, что за глупости? Jquery, картинки...

<div style="width:22%;background:#fdd;display:inline-block">1</div><div style="width:78%;background:#dfd;display:inline-block;*!*border-left:1px solid;margin-left:-1px;*/!*">2</div>

Или так, если полоска прозрачная:

<body style="background:#669">
<div style="*!*margin-right:1px;*/!*">
    <div style="width:22%;background:#fdd;float:left;">1</div>
    <div style="width:78%;background:#dfd;float:right;*!*margin-right:-1px;*/!*">2</div>
</div>

Вариантов куча.

Форум

Справочник

Discord чат

Курсы javascript