Winston
20.11.2012 - 00:08
Всем привет. Есть вот такой код
<style type="text/css">
.wrap{width: 620px;}
.wrap > div.item {float: left; border: 1px solid; margin-left: 20px; width: 138px; height: 260px;}
.wrap > div.first{margin-left: 0px;}
</style>
<div class="wrap">
<div class="item first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="clear"></div>
</div>
в результате получаем это
http://screencloud.net/v/4gtcНо если нажать Ctrl + "-" получаю вот такую фиговину
http://screencloud.net/v/kr5K :angry:
Как нужно сделать чтобы ничего, никуда не ехало? :(
Размеры фиксированные, изменять нельзя.
asdf27
20.11.2012 - 00:37
Во-первых, на втором скрине "ширине шире".
Во вторых, считаем:
wrap > div.item {float: left; border: 1px solid; margin-left: 20px; width: 138px; height: 260px;}width 138px умножим на 4 блока = 552px.
margin-left: 20px так же на 4 = 80, в сумме 632px
а у вас весь блок .wrap{width: 620px;} + плюс на бордюры еще 8 пикселей. Меняйте ширинк .wrap
asdf27
20.11.2012 - 00:39
| Цитата |
| Размеры фиксированные, изменять нельзя. |
Тогда margin-left: 20px; уменьшайте. А лучше первым трем дивам сделайте margin-right, а последний обзовите иначе, скопируйте стиль и уберите margin
asdf27
20.11.2012 - 00:43
ПРОЩЕВот тут
.wrap > div.item {float: left; border: 1px solid; margin-left: 20px; width: 138px; height: 260px;} делай margin-left 10px
Winston
20.11.2012 - 00:46
| Цитата (asdf27 @ 19.11.2012 - 22:37) |
| margin-left: 20px так же на 4 = 80, в сумме 632px |
У меня 3 margin-left, для первого стоит 0, все выходит правильно.
killer8080
20.11.2012 - 00:48
| Цитата (asdf27 @ 19.11.2012 - 23:37) |
| margin-left: 20px так же на 4 = 80, в сумме 632px |
не на 4, а на 3, у первого блока нулевой отступ
Winston
потестил твой код, вроде все нормально. Какой браузер и доктайп?
Winston
20.11.2012 - 00:48
| Цитата (asdf27 @ 19.11.2012 - 22:43) |
| делай margin-left 10px |
Я не могу поменять, нужно чтобы было 20, ни больше ни меньше..
Спустя 2 минуты, 55 секунд Winston написал(а):
killer8080
Доктайп html5, и в хроме и в FF такая фигня (остальные не тестил)..
Спустя 1 минута, 1 секунда Winston написал(а):
В опере все OK
asdf27
20.11.2012 - 01:01
Да, проглядел.
При .wrap{width: 626px;} съезжает на 63% масштабе.
При .wrap{width: 628px;} съезжает на 33% масштабе.
При .wrap{width: 644px;} не съезжает на минимальном 33% масштабе.
Действительно, проглядел класс первого дочернего дива. Тем не менее, прибавляйте 8px бордюров, получится ровно 620. Наблюдения по смещению я привел выше.
Браузер Chrome.
| Цитата |
| Я не могу поменять, нужно чтобы было 20, ни больше ни меньше.. |
Видимо это особенность масштабирования и вы ничего с этим не поделаете. А если разберетесь, укажите как.
killer8080
20.11.2012 - 01:02
Winston
значит эти браузеры криво масштабируют, ширина бордюра остается 1px, а ширина блока изменятся в процентном отношении из-за этого блоки оказываются шире обертки. Тут либо увеличить ширину обертки (поможет до определнной величины), либо просто забить, вряд ли нормальные юзеры масштабируют страницу в минус.
redreem
20.11.2012 - 07:17
outline вместо border - не вариант?
.wrap > div.item {float: left; outline:1px solid; margin-left: 20px; width: 140px; height: 260px;top:1px}
.wrap > div.first{margin-left: 0px;left:1px}
inpost
20.11.2012 - 07:31
Если такой вопрос, то можно див положить внутрь первого дива, уже внутреннему дать border. В таком случае border не будет участвовать в формировании ширины блока.
_____________
Обучаю веб-программированию качественно и не дорого:
http://school-php.comФрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).
Winston
20.11.2012 - 11:20
redreemIt works!Спасибо!!!
inpostТвой вариант не пробовал, т.к. помог предыдущий совет.
UPD в IE7 бордюров не видно
redreem
20.11.2012 - 11:32
Winston
ну да. в седьмом ишаке аутлайна нет. есть еще вариант - делать внешний див с бакграундом цвета бордюра (item) шириной 140, а в нем див item_content, шириной и высотой на 1px меньше и с белым бакграундом. будет эффект бордюра. а так - проблему уже сказали выше - дробный размер пиксела при масштабировании приводит к переполнению строки.
redreem
20.11.2012 - 11:35
еще можно сделать блоки не флоат, а просто inline-block и для обертки поставить overflow-x:hidden. вариантов много, все зависит уже от контекста. я как правило в таких случая просто делаю запас в пару пикселов у обертки, чтобы дробность при масштабировании компенсировалась. визуально не видно и работает.
Игорь_Vasinsky
20.11.2012 - 12:07
| Цитата |
| а просто inline-block и для обертки |
а для IE??
*dysplay:inline
_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker
Быстрый ответ:
Powered by dgreen
Здесь расположена полная версия этой страницы.