Задача - оба блока частично вывести за экран (влево и вправо, соответственно). Выводимые части блоков должны быть видны только в бОльших разрешениях. При этом в разрешении 1024 горизонтального скроллинга быть не должно.
Попытка решения.
Даю левому блоку отрицательный margin-left. Все прекрасно - блок частично уехал за экран, скроллинга нет, выведенная часть видна в бОльшем разрешении.
Даю правому блоку отрицательный margin-right. Блок уезжает, но появляется горизонтальный скроллинг. Попросту основной блок расширяется на величину margin-right. И как это побороть - не могу разобраться. И позиционирование тоже дает горизонтальный скроллинг.
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
CSS:
#wrapper{height:200px;
width:1000px;
background-color:#999999;
margin:0 auto;}
#left, #right {
height:50px;
width:200px;
background-color:#0000FF;}
#left{float:left;/*добавляем тут margin-left:-100px; и все прекрасно работает - блок наполовину уезжает, скроллинга нет.*/}
#right{float:right;/*здесь такой же номер с margin-right:-100px; дает горизонтальный скроллинг.*/}
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке.
Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
Question
Sub0
Здравствуйте.
Подскажите, пожалуйста, один момент.
Есть блок шириной 1000px и margin:0 auto.
Внутри два блока - левый и правый.
Задача - оба блока частично вывести за экран (влево и вправо, соответственно). Выводимые части блоков должны быть видны только в бОльших разрешениях. При этом в разрешении 1024 горизонтального скроллинга быть не должно.
Попытка решения.
Даю левому блоку отрицательный margin-left. Все прекрасно - блок частично уехал за экран, скроллинга нет, выведенная часть видна в бОльшем разрешении.
Даю правому блоку отрицательный margin-right. Блок уезжает, но появляется горизонтальный скроллинг. Попросту основной блок расширяется на величину margin-right. И как это побороть - не могу разобраться. И позиционирование тоже дает горизонтальный скроллинг.
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
CSS:
#wrapper{height:200px;
width:1000px;
background-color:#999999;
margin:0 auto;}
#left, #right {
height:50px;
width:200px;
background-color:#0000FF;}
#left{float:left;/*добавляем тут margin-left:-100px; и все прекрасно работает - блок наполовину уезжает, скроллинга нет.*/}
#right{float:right;/*здесь такой же номер с margin-right:-100px; дает горизонтальный скроллинг.*/}
Спасибо.
Link to comment
Share on other sites
3 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.