0

html,
body {
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 150px;
  background-color: #313131;
}

.l-sidebar {
  float: left;
  width: 220px;
  height: 700px;
  background-color: #9C9C9C;
}

.wrapper {
  white-space: nowrap;
}

.content {
  float: left;
  width: 400px;
  height: 500px;
  background-color: green;
}

.slot1 {
  position: absolute;
}
<div class="header"></div>
<div class="l-sidebar"></div>
<div class="wrapper">
  <div class="content">
    <div class="slot1">
      <img>
    </div>
  </div>
</div>

Блок content съезжает вниз при уменьшении экрана. В каком-то другом похожем вопросе на SO видел, что white-space: nowrap помогло, но здесь не работает.
Как сделать так, чтобы блок content оставался там же и появлялся боковой скрол?

P.S. Я знаю, что есть похожие вопросы, но ответы на них мне не помогли.

UPD: задал background-color для content

7
  • Ему не хватает места, вот и съезжает
    – user355286
    30 дек 2019 в 17:42
  • так как жестко задана ширина
    – user355286
    30 дек 2019 в 17:42
  • jsfiddle.net/5h69r7ne
    – user355286
    30 дек 2019 в 17:48
  • 1
    и пора выучить что-то кроме флоатов, если хотите дальше заниматься этим
    – user355286
    30 дек 2019 в 17:49
  • @hu-fo-of-ex спасибо за пример, но это не совсем то, что я бы хотел. Ведь есть же сайты, где размеры блока заданы фиксировано и при уменьшении размера экрана они не слетают, а появляется скрол прокрутки. Неужели никак нельзя сделать , чтобы происходило таким образом?
    – JustLearn
    30 дек 2019 в 17:53

2 ответа 2

0

А вот как вариант, в котором при уменьшении экрана блок не съезжает вниз и появляется боковой скролл. Чем не вариант?)

$('.nav__icon').click(function() {
  if ($('.l-sidebar').is(':visible')) {

    $('.l-sidebar').each(function(i) {
      $(this).delay((i++) * 800).animate({
        width: "hide"
      }, 800);
    });
    $('.nav__icon').removeClass("active");
  } else {
    $('.l-sidebar').each(function(i) {
      $(this).delay((i++) * 800).animate({
        width: "show"
      }, 800);
    });
    $('.nav__icon').addClass("active");
  }
});
html,
body {
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 150px;
  background-color: #313131;
}

.l-sidebar {
  float: left;
  width: 220px;
  height: 700px;
  background-color: #9C9C9C;
}

@media only screen and (max-width: 1020px) {
  .l-sidebar {
    display: none;
  }
}

.wrapper {
  min-width: 800px;
  white-space: nowrap;
}

.content {
  width: 800px;
  height: 500px;
  background-color: green;
}

.slot1 {
  position: absolute;
}

.nav__icon {
  cursor: pointer;
  position: absolute;
  left: 20px;
  top: 20px;
  width: 40px;
  height: 29px;
  z-index: 99;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -ms-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

@media only screen and (min-width: 1020px) {
  .nav__icon {
    display: none;
  }
}

.nav__icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #ffffff;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -ms-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.nav__icon span:nth-child(1) {
  top: 0px;
}

.nav__icon span:nth-child(2),
.nav__icon span:nth-child(3) {
  top: 10px;
}

.nav__icon span:nth-child(4) {
  top: 20px;
}

.nav__icon.active span:nth-child(1) {
  top: 10px;
  width: 0%;
  left: 50%;
}

.nav__icon.active span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav__icon.active span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nav__icon.active span:nth-child(4) {
  top: 10px;
  width: 0%;
  left: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <div class="nav__icon"><span></span><span></span><span></span><span></span></div>
</div>
<div class="l-sidebar"></div>
<div class="wrapper">
  <div class="content">
    <div class="slot1">
      <img>
    </div>
  </div>
</div>

0

В стиле тому блоку с текстом добавьте свойство overflow-x:hidden;, или overflow-y:hidden;, или overflow:hidden;, и появятся разные полосы прокруток при переполнении текста.

2
  • День добрый. А можете более подробнее расписать, как оно может помочь? 31 дек 2019 в 7:15
  • просто в стиле тому блоку с текстом добавьте свойство overflow-x:hidden; или overflow-y:hidden; или overflow:hidden; и появяться разные полосы прокруток при переполнении текста 31 дек 2019 в 17:16

Ваш ответ

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

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