1. дома
  2. Вопрос и ответ
  3. Изменение порядка столбцов с использованием медиа-запроса

Изменение порядка столбцов с использованием медиа-запроса

2015-09-11 4 views
1

Что я пытаюсь сделать, это поместить правый столбец рядом с левым столбцом, используя медиа-запрос (прямо сейчас он находится рядом с центральным столбцом). Правый столбец также должен иметь левое поле 10px (по мере уменьшения размера экрана), как и в примере. Я добавляю положение: абсолютное; правый: 8px; но это не работает так, как мне нужно. Спасибо.Изменение порядка столбцов с использованием медиа-запроса

div { 
 
    border-radius: 4px; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -ms-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#header { 
 
    height: 52px; 
 
    width: calc(100% - 16px); 
 
    background-color: #B2D490; 
 
    z-index: 1; 
 
    position: fixed; 
 
    top: 10px; 
 
} 
 
h1 { 
 
    color: #FFFFFF; 
 
    padding-left: 25px; 
 
    margin: 0; 
 
    display: inline; 
 
    font-size: 27px; 
 
    line-height: 50px; 
 
} 
 
h2, h3, h4, h5, h6 { 
 
    padding-left: 10px; 
 
    margin: 10px 0 10px 0px; 
 
    color: #00457D; 
 
} 
 
.left { 
 
    width: 300px; 
 
    background-color: #C7E6FF; 
 
    float: left; 
 
    margin-top: 64px; 
 
    margin-right: calc(50% - 450px); 
 
} 
 
.middle { 
 
    width: 300px; 
 
    background-color: #DEF0FF; 
 
    margin-top: 64px; 
 
    float: left; 
 
} 
 
.right { 
 
    width: 300px; 
 
    background-color: #C7E6FF; 
 
    float: right; 
 
    margin-top: 64px; 
 
} 
 
#footer { 
 
    height: 35px; 
 
    width: 100%; 
 
    background-color: #57C449; 
 
    clear: both; 
 
    position: relative; 
 
    margin-top: 10px; 
 
} 
 
p { 
 
    color: #00579E; 
 
} 
 
#footer p { 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    margin: auto; 
 
    line-height: 35px; 
 
} 
 
span { 
 
    color: #D4EBFF; 
 
} 
 

 
@media screen and (max-width: 980px) { 
 
    body { 
 
     width: 95%; 
 
    } 
 
    .left { 
 
     width: 60%; 
 
     margin-right: 0; 
 
    } 
 
    .middle { 
 
     width: 60%; 
 
     margin-top: 10px; 
 
    clear: both; 
 
    } 
 
    .right { 
 
     width: calc(40% - 10px); 
 
     margin-top: 10px; 
 

 
    
 
     
 
    } 
 
}
<head> 
 
\t \t <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
\t \t <title>My Resume</title> 
 
\t </head> 
 
\t <body> 
 
\t <div id="header"> 
 
\t  <h1>My <span>Resume</span></h1> 
 
\t </div> 
 
\t <div class="left"> 
 
\t  <h2>Left Column</h2> 
 
\t   <ul> 
 
\t    <p>Some Text</p> 
 
\t    <p>Some Text</p> 
 
\t   </ul> 
 
\t </div> 
 
\t \t <div class="middle"> 
 
\t  <h2>Сenter Column</h2> 
 
\t   <ul> 
 
       <li><p>Some Text</p></li> 
 
       <li><p>Some Text</p></li> 
 
     </ul> 
 
\t </div> 
 
\t <div class="right"> 
 
\t  <h4>Right Column</h4> 
 
\t   <ul> 
 
\t    <p>Some Text</p> 
 
\t    <p>Some Text</p> 
 
\t  </ul> 
 
\t </div> 
 
\t <div style="clear:both; border:none; border-radius: none;"></div> 
 
\t <div id="footer"> 
 
\t  <p>© 2015 Me - the Programmer</p> 
 
\t </div>

источник

2015-09-11 Artem Z

ответ

2

Вы можете добиться этого, сделав несколько изменений в CSS и HTML:

  • Перемещение .middlediv после .rightdiv в HTML
  • Изменение margin-top: 10px; в margin-top: 64px; на .right в запросе медиа

Это работает, потому что .middle установлен в float: left;, который будет толкать его в левой части контейнера пока он не попадет в другой плавающий элемент (в этом случае .left). .right установлен на float: right;, который будет толкать его справа от контейнера.

Как поплавки расположены

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

поплавок (https://developer.mozilla.org/en-US/docs/Web/CSS/float)

Когда запрос СМИ в действительности .middle устанавливается в clear: both;, как это после того, как .left и .right в HTML он будет размещен на новой линии клирингового и поплыл элементы.

div { 
 
    border-radius: 4px; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -ms-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#header { 
 
    height: 52px; 
 
    width: calc(100% - 16px); 
 
    background-color: #B2D490; 
 
    z-index: 1; 
 
    position: fixed; 
 
    top: 10px; 
 
} 
 
h1 { 
 
    color: #FFFFFF; 
 
    padding-left: 25px; 
 
    margin: 0; 
 
    display: inline; 
 
    font-size: 27px; 
 
    line-height: 50px; 
 
} 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    padding-left: 10px; 
 
    margin: 10px 0 10px 0px; 
 
    color: #00457D; 
 
} 
 
.left { 
 
    width: 300px; 
 
    background-color: #C7E6FF; 
 
    float: left; 
 
    margin-top: 64px; 
 
    margin-right: calc(50% - 450px); 
 
} 
 
.middle { 
 
    width: 300px; 
 
    background-color: #DEF0FF; 
 
    margin-top: 64px; 
 
    float: left; 
 
} 
 
.right { 
 
    width: 300px; 
 
    background-color: #C7E6FF; 
 
    float: right; 
 
    margin-top: 64px; 
 
} 
 
#footer { 
 
    height: 35px; 
 
    width: 100%; 
 
    background-color: #57C449; 
 
    clear: both; 
 
    position: relative; 
 
    margin-top: 10px; 
 
} 
 
p { 
 
    color: #00579E; 
 
} 
 
#footer p { 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    margin: auto; 
 
    line-height: 35px; 
 
} 
 
span { 
 
    color: #D4EBFF; 
 
} 
 
@media screen and (max-width: 980px) { 
 
    body { 
 
    width: 95%; 
 
    } 
 
    .left { 
 
    width: 60%; 
 
    margin-right: 0; 
 
    } 
 
    .middle { 
 
    width: 60%; 
 
    margin-top: 10px; 
 
    clear: both; 
 
    } 
 
    .right { 
 
    width: calc(40% - 10px); 
 
    margin-top: 64px; 
 
    } 
 
}
<head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
 
    <title>My Resume</title> 
 
</head> 
 

 
<body> 
 
    <div id="header"> 
 
    <h1>My <span>Resume</span></h1> 
 
    </div> 
 
    <div class="left"> 
 
    <h2>Left Column</h2> 
 
    <ul> 
 
     <p>Some Text</p> 
 
     <p>Some Text</p> 
 
    </ul> 
 
    </div> 
 
    <div class="right"> 
 
    <h4>Right Column</h4> 
 
    <ul> 
 
     <p>Some Text</p> 
 
     <p>Some Text</p> 
 
    </ul> 
 
    </div> 
 
    <div class="middle"> 
 
    <h2>Сenter Column</h2> 
 
    <ul> 
 
     <li> 
 
     <p>Some Text</p> 
 
     </li> 
 
     <li> 
 
     <p>Some Text</p> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div style="clear:both; border:none; border-radius: none;"></div> 
 
    <div id="footer"> 
 
    <p>© 2015 Me - the Programmer</p> 
 
    </div>

источник

2015-09-11 07:38:17

+0

Спасибо, почти идеально, но правый столбец теперь имеет правый край. –

+0

Нет проблем. Похоже, это из-за 'body {width: 95%; } 'в медиа-запросе. Если вы удалите это правило, оно будет выровнено по правому краю. –

2

Вы можете добиться того, что с помощью Flexbox

div { 
 
    border-radius: 4px; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -ms-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#header { 
 
    height: 52px; 
 
    width: calc(100% - 16px); 
 
    background-color: #B2D490; 
 
    z-index: 1; 
 
    position: fixed; 
 
    top: 10px; 
 
} 
 
h1 { 
 
    color: #FFFFFF; 
 
    padding-left: 25px; 
 
    margin: 0; 
 
    display: inline; 
 
    font-size: 27px; 
 
    line-height: 50px; 
 
} 
 
h2, h3, h4, h5, h6 { 
 
    padding-left: 10px; 
 
    margin: 10px 0 10px 0px; 
 
    color: #00457D; 
 
} 
 
.left { 
 
    width: 300px; 
 
    background-color: #C7E6FF; 
 
    margin-top: 64px; 
 
} 
 
.middle { 
 
    width: 300px; 
 
    background-color: #DEF0FF; 
 
    margin-top: 64px; 
 
} 
 
.right { 
 
    width: 300px; 
 
    background-color: #C7E6FF; 
 
    margin-top: 64px; 
 
} 
 
#footer { 
 
    height: 35px; 
 
    width: 100%; 
 
    background-color: #57C449; 
 
    clear: both; 
 
    position: relative; 
 
    margin-top: 10px; 
 
} 
 
p { 
 
    color: #00579E; 
 
} 
 
#footer p { 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    margin: auto; 
 
    line-height: 35px; 
 
} 
 
span { 
 
    color: #D4EBFF; 
 
} 
 

 
.columns{ 
 
    display:flex; 
 
    width: 100%; 
 
    justify-content: space-between; 
 
    flex-wrap:wrap; 
 
} 
 

 
.left{ 
 
    order: 1; 
 
} 
 
.middle{ 
 
    order: 2; 
 
} 
 
.right{ 
 
    order: 3; 
 
} 
 

 
@media (max-width:980px){ 
 
    .middle{ 
 
    order: 3; 
 
    margin-top: 10px; 
 
    } 
 
    .right{ 
 
    order:2; 
 
    } 
 
}
<head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
 
    <title>My Resume</title> 
 
</head> 
 

 
<body> 
 
    <div id="header"> 
 
    <h1>My <span>Resume</span></h1> 
 
    </div> 
 
    <div class="columns"> 
 
    <div class="left"> 
 
     <h2>Left Column</h2> 
 
     <ul> 
 
     <p>Some Text</p> 
 
     <p>Some Text</p> 
 
     </ul> 
 
    </div> 
 
    <div class="middle"> 
 
     <h2>Сenter Column</h2> 
 
     <ul> 
 
     <li> 
 
      <p>Some Text</p> 
 
     </li> 
 
     <li> 
 
      <p>Some Text</p> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div class="right"> 
 
     <h4>Right Column</h4> 
 
     <ul> 
 
     <p>Some Text</p> 
 
     <p>Some Text</p> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div style="clear:both; border:none; border-radius: none;"></div> 
 
    <div id="footer"> 
 
    <p>© 2015 Me - the Programmer</p> 
 
    </div>

источник

2015-09-11 07:31:00 GOB

+0

Спасибо, что это отличная идея. Но вы немного упустили точку. Это должно быть так: Left Column | Столбец центра и правая колонка ниже левого столбца. –

+0

отредактировал его, просто добавьте 'flex-wrap: wrap;' в столбцы div – GOB

Смежные вопросы

 Смежные вопросы