-1

Допустим, у меня есть сайт шириной 1000 пикселов. И в нем две колонки. Как сделать блок, который бы шел где-то после этих двух колонок шириной, 100% от экрана, а затем снова бы шли колонки???

3
  • Конкретнее пожалуйста. Момент с 2мя колонками и шириной 100% экрана не ясен. 4 янв 2012 в 18:51
  • 1
    А весь экран у вас 146%? 4 янв 2012 в 20:37
  • Посредине имеется в виду в вертикальном потоке блоков.
    – vp_arth
    11 мар 2017 в 8:21

3 ответа 3

1

Для того блока, который в обёртке 1000px, задать position: absolute; width: 100%; position - выдернет из потока ваш внутренний блок, а ширина будет растянута на весь экран для любого монитора (не забудьте указать height для блока), остаётся только через свойство top: подогнать отступ сверху.

Так как ширина будет 100%, то никакие отступы и пэйдинги слева и справа не нужны, а значит можно подогнать блок через отступ сверху (свойство top:), если надо конечно.

И про z-index не забываем, если я Вас правильно понял.

6
  • @Илья Знаменский, не указывайте top) .c { position: absolute; left: 0px; width: 100%; }
    – Sh4dow
    7 янв 2012 в 14:33
  • А не легче этот блок обернуть в табличку и поставить valign: middle (ну вы меня поняли к чему я клоню ☺), и тогда он будет не только посередине горизонтали, а ещё и по вертикале. 7 янв 2012 в 14:42
  • @Миха Николаев - за такие подделки реально хочется сильно бить по рукам (молотком, и лучше несколько раз для профилактики). Зачем городить костыль на ровном месте? Не все что "проще" - лучше
    – user3545
    7 янв 2012 в 15:16
  • @AlexWindHope ты на меня не гони, а предложи свою идею как ты это видишь!! За одно и поржем!! пхаахахах 7 янв 2012 в 15:32
  • Мне верстка давным давно не интересна и отвечать на подобного рода вопросы тоже, @GenchiK уже дал адекватный ответ, то же что написал ты - бред. "пхаахахах" в твоем комменте лишь подтверждает твою неадыкватность
    – user3545
    7 янв 2012 в 15:35
0

Можно использовать свойство float. Делаешь как то так:

<div style="clear:both">
   <div style="width:50%; float:left"></div>
   <div style="width:50%; float:left"></div>
</div>
<div style="height:100px"></div>
<div style="clear:both">   
    <div style="width:50%; float:left"></div>   
    <div style="width:50%; float:left"></div>
</div>

но я бы лучше использовал bootstrap

0

Выбирай:

  • width: 100vw
  • position: fixed
  • position: absolute при соответствующем контексте

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.