Адаптивный html/css макет с 3 столбцами — правый столбец размещается под левым столбцом

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

Я создал эту базовую симуляцию моей проблемы. Обратите внимание, что средний столбец всегда будет длиннее, чем левый и правый столбцы, как показано здесь.

<style>
  .container {
    max-width:1280px;
    width:100%;
    height:200px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-wrap: wrap;
  }

  .leftsidebar {
    width:20%;
    height:200px;
    background-color:gray;
    margin-top:15px;
  }

 .middle {
    width:57%;
    background-color:blue;
    margin-left:15px;
    margin-right:15px;
    height:800px;
    margin-top:15px;
  }

 .rightsidebar {
    width:20%;
    background-color:orange;
    height:200px;
    margin-top:15px;
  }
</style>

<div class="container">
  <div class="leftsidebar">left</div>
  <div class="middle">middle</div>
  <div class="rightsidebar">right</div>
</div>

html css flexbox responsive
person DanC    schedule 02.11.2017    source источник
comment
Не решение, но я сомневаюсь, что вам нужно плавать на ваших гибких элементах.   -  person stealththeninja    schedule 02.11.2017

Ответы (2)


arrow_upward
0
arrow_downward

Вы не можете добиться этого с помощью Flexbox, если только установка фиксированной высоты не закончена.

Вот решение, которое объединяет Flexbox с float и использует медиа-запрос для переключения между ними на более узких экранах.

Обратите внимание, что при использовании процентной ширины в сочетании с фиксированными полями в какой-то момент элемент может перевернуться. Используйте CSS Calc, чтобы избежать этого, как показано в ответе.

Фрагмент стека

.container {
  max-width: 1280px;
  height: 200px;
  margin: 0 auto;
  display: flex;
}

.leftsidebar, .rightsidebar {
  width: 20%;
  background-color: gray;
  margin-top: 15px;
}
.rightsidebar {
  background-color: orange;
  clear: left;
}

.middle {
  width: calc(60% - 30px);          /*  calc for margin  */
  background-color: blue;
  margin: 15px 15px 0 15px;
  height: 800px;
}

@media (max-width: 600px) {
  .container {
    display: block;
  }
  .leftsidebar, .rightsidebar {
    height: 200px;
    float: left;
  }
  .middle {
    width: calc(80% - 30px);          /*  calc for margin  */
    float: right;
  }
}
<div class="container">
  <div class="leftsidebar">left </div>
  <div class="middle">middle </div>
  <div class="rightsidebar">right </div>
</div>

person Ason    schedule 02.11.2017
comment
Это отлично сработало, так как мне нужно, чтобы flexbox использовал порядок для перестановки столбцов, когда он сводится к одному столбцу. - person DanC; 06.11.2017
comment
@DanC Звучит хорошо. Я также хотел бы, чтобы вы приняли мой ответ, поскольку он ответил на ваш вопрос. - person Ason; 06.11.2017

arrow_upward
0
arrow_downward

Я смог придумать только старые добрые поплавки, никаких флексбоксов. Если вам не нужно использовать flexbox'ы, и вы заинтересованы, с довольно легкой суетой это может выглядеть так (точка привязки 700px):

* {
     box-sizing: border-box;
}
.container {
    width:90%; 
    height:200px; 
    margin:0px auto;
}
div > div {
  background-color: orange;
  float: left;
  color: white;
  text-align: center;
  padding: 1em;
}
.leftsidebar {
    width: 20%; 
    height: 200px;  
    margin-top: 15px;
}
.middle{
    width:56%;  
    margin: 15px 2% 0%;  
    height:415px; 
}
.rightsidebar {
    width: 20%; 
    height: 200px; 
    margin-top: 15px;
}
@media (max-width: 700px) {
    div > div:nth-of-type(2n + 1) {
        width: 33%;
    }  
    div > div:nth-of-type(2n) {  
       float: right;
       width: 65%; 
       margin-right: 0%;
    } 
}
<div class="container">

<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>

person curveball    schedule 02.11.2017