переместить элемент с фиксированным полем ниже элемента div с плавающей точкой, если размер экрана небольшой - PullRequest
Новая
       20

переместить элемент с фиксированным полем ниже элемента div с плавающей точкой, если размер экрана небольшой

1 голос
/ 23 января 2020

Я использую рекомендуемый подход из этого вопроса { ссылка } и имею два деления: 

#left-pane {
  float: "left";
  width: "300px";
}

#right-pane {
  margin-left: "300px";
}

левая панель занимает фиксированную ширину 300 пикселей, а правая панель всегда занимает до 100% оставшегося пространства.

Я хочу добавить «минимальную ширину» на правой панели. Когда он становится меньше ширины около 300 пикселей, я хочу переместить его ниже левой панели.

Когда я пытаюсь фактически добавить min_width: 300px к правой панели, он просто незаметно выходит за границы страницы - кажется, что он не может оказаться ниже всплывающей левой панели.

Codepen

PHOTO DEPICTING PROBLEM

Ответы [ 3 ]

2 голосов
/ 23 января 2020

это не float работа. вам нужно flex для этого экземпляра. 

.container {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
 }

#left-pane {
  width: 300px;
  min-width: 300px;
}

@media only screen and (max-width: 300px) {
  .container {
    flex-flow: column;
  }
}

с использованием flex дает вам много нового макета и адаптивных опций, вы можете прочитать больше здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2 голосов
/ 23 января 2020 

.parent {
  display: flex;
}
#left {
  float: left;
  width: 300px;
  height: 300px;
  background-color: blue;
}

#right {
  height: 300px;
  background-color: darkred;
  width: calc(100% - 300px);
}

@media (max-width: 600px) {
  .parent {
    flex-direction: column;
  }
  #left,
  #right {
    width: 100%;
  }
}
<div class="parent">
  <div id='left'></div>
  <div id='right'></div>
</div>
2 голосов
/ 23 января 2020

Вы можете использовать flexbox для вашего макета. Вы можете найти хорошую точку для начала на MDN .

Когда вы используете небольшое устройство, вы можете использовать медиа-запрос, чтобы получить div для столбца.

Например: 

@media (max-width: 600px) {
  .container{
    flex-direction:column;
  }
  #left,#right{
    flex: 0 1 100%;/* set the width to 100% for the 2 columns */
  }
}


.container{
  display:flex;
}
#left {
  flex:0 1 300px;
  height: 300px;
  background-color: blue;
}

#right {
  flex:1 1 auto;
  height: 300px;
  background-color: darkred;
}
<div class="container">
  <div id='left'></div>
  <div id='right'></div>
</div>
...