Вход

Просмотр полной версии : вопрос по масштабированию

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

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

пробовал считать процент этого пикселя и указать border-width в %, не получается, если надо могу выдать код, может кто втсречался с подобным?
рони
01.07.2014, 18:21
sergeo_89,
width: calc(78% - 1px)
krasovsky
02.07.2014, 09:47
Самый кроссбраузерный выход - сверстать таблицей, и пожалуй единственный если хочешь сохранять полоску равно1 px. Иначе задавай ее в процентах/либо общая ширина не более 99%
sergeo_89
02.07.2014, 09:53
рони,
Спасибо, в jQuery можно прописать так $('.content').css('width', '78%').css('width', '-=1.5px');
Только проблему это не решает, при масштабировании в минус , этот пиксель превращается в, 2 а то и в 3 и сдвигает вниз блок с контентом...
sergeo_89
02.07.2014, 10:22
krasovsky,
тогда если использовать табличную верстку, можно ведь только этот самый контент на таблице сделать, а остальное на дивах)
рони
02.07.2014, 10:53
sergeo_89,
показали бы макет html сss -- непонятно зачем тут jQuery ?
sergeo_89
02.07.2014, 11:21
рони,
уже разобрался, вставил просто картинкой блок с меню, теперь все хорошо, спасибо
krasovsky
02.07.2014, 12:55
krasovsky,
тогда если использовать табличную верстку, можно ведь только этот самый контент на таблице сделать, а остальное на дивах)

Конечно
Aetae
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>

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