Изменение положения HTML-элементов при изменении размера окна - PullRequest
Новая
       32

Изменение положения HTML-элементов при изменении размера окна

0 голосов
/ 06 июля 2018

У меня есть 3 элемента подряд. Когда размер окна будет уменьшен, я хочу, чтобы центральный элемент переместился вверх, а правый элемент переместился вниз. Левый элемент должен быть посередине. В идеале все они должны двигаться одновременно, поэтому, если самый правый элемент перемещается вниз, центральный элемент тоже должен двигаться вверх.

Спасибо за вашу помощь!

Фотографии показывают желаемый результат.

Wide Narrow

HTML 

<div class="container">
    <span class="left">This should go in between</span>
    <span class="center">This should go ABOVE</span>
    <span class="right">This should go BELOW</span>
</div>

CSS 

body {
  margin: 0px;
  padding: 0px;
}

.container {
  width: 100%;
}

.container span {
  min-width: 200px;
  width: calc(100% /3);
  width: 33.33%;
}

.left {
  float: left;
  background-color: red;
}

.center {
  text-align: center;
  float: left;
  background-color: green;
}

.right {
  float: right;
  text-align: right;
  background-color: blue;
}

@media (max-width: 600px) {
  .right {
    float: left;
    text-align: left;
  }
  .center {
    text-align: left;
  }
}

JSFiddle

1 Ответ

0 голосов
/ 06 июля 2018

Мне удалось найти пару решений для этого. Правило @media css работает, когда ширина экрана уменьшается ниже определенной ширины. Вот пример: Раствор 1

Решение, которое я выбрал, заключалось в использовании flexbox и свойства order для установки порядка элементов. Затем правило @media меняет порядок #, когда экран был достаточно тонким.

Вот решение 1 (я этого не писал): 

<div class="container">
    <div class="inner-w">        
        <div class="block center">Center</div>  
        <div class="block left">Left</div>
        <div class="block right">Right</div>
    </div>
</div> <!-- .container -->

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    float: left;
    overflow: hidden; /* should be clearfix instead */
}

.container .inner-w {
    position: relative;
    max-width: 50em;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden; /* should be clearfix instead */
}

.block {
    width: 100%;
    float: left;
    min-height: 10em; /* just for show */
}

@media (min-width: 50em) {  

    .center {
        width: 50%;
        position: relative;
        left: 25%;
    }

    .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 25%;
    }

    .right {
        float: right;
        width: 25%;    
    }
} /* end break-point */















/* just for show */
.container {
    border: 1px solid blue;
}

.container .inner-w {
    border: 1px solid orange;
}

.block {
    border: 1px solid red;
    min-height: 10em; /* just for show */
    padding: 1em;
}
...