Как реализовать мобильный разделенный экран, но с шириной экрана в два раза больше экрана? - PullRequest
Новая
       6

Как реализовать мобильный разделенный экран, но с шириной экрана в два раза больше экрана?

0 голосов
/ 10 января 2019

Я бы хотел создать мобильный сайт с разделенным экраном, но с возможностью прокрутки влево и вправо. Я думаю, что это изображение хорошо подводит итог:

Вот изображение, которое я набросал о желаемом результате.

Я пробовал это несколькими способами, используя CSS, но всегда как-то не получалось. width: 200% сделал это больше, чем удвоенная ширина экрана, окна просмотра всегда фиксировали размер экрана. Я полагаю, это не должно быть так сложно. У вас есть идеи, чтобы это произошло? Заранее спасибо!

1 Ответ

0 голосов
/ 10 января 2019

попробуйте использовать width: 200vw; это может решить вашу проблему

этот пример может помочь вам понять 

.inner {
  display: inline-block;
  width: 200vw;
}
.outer {
  overflow-x: auto;
}
span {
  float: left;
  display: inline-block;
  background-color: #00ff00;
  width: 50%;
}
p {
  float: left;
  display: inline-block;
  background-color: #ff00ff;
  width: 50%;
}
<div class="outer">
  <div class="inner">
    <span>
      hello
    </span>
    <p>hello there</p>
  </div>
</div>
...