Вопросы Теги

Отзывчивый гибкий макет с боковой панелью [дубликат]

Вложенные ссылки являются незаконными. Чтобы добиться такого же поведения, как и в вложенных ссылках, вы можете сделать следующее:

Использовать HTML-формат @mikevoermans, как показано ниже, и связать событие click 

<div class="sp_mngt_bar">
    <h1><a href="#"<?php echo $v; ?></a></h1>
    <a href="#" class="t_icons t_icons_settings sp_mngt_settings"></a>
    <a href="#" class="t_icons t_icons_move sp_mngt_move"></a> 
</div>

Ваше событие click должно выглядеть так: это: 

$(".sp_mngt_bar").bind("click", function(e) {   
    var target = $(e.target);
    if(target.has('.t_icons_settings') { //Do something for settings } 
    else if(target.has('.t_icons_move') { //Do something for move }
    else { //Do something for sp_mngt_bar
});
4
задан Michael_B 18 October 2016 в 14:06
поделиться

2 ответа

Похоже, вы были почти там. Еще два шага:

  1. Определите высоту контейнера flex. Без определенной высоты некоторые браузеры могут не знать, где их можно обернуть. Попробуйте следующее: 
    .container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 500px; /* new; value just for demo purposes */
}
  2. Отключить обертку в мобильном режиме 
    @media (max-width: 500px) {
   .container { flex-wrap: nowrap; } /* new */
   .cell { width: 100%; }
   .cell-1 { order: 2; }
   .cell-2 { order: 1; }
   .cell-3 { order: 3; }
}


.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 500px;
}
.cell {
  background: #ccc;
  border: solid 3px black;
  width: 50%;
}
.cell-1 {
  flex-basis: 100%;
}
@media (max-width: 500px) {
  .container {
    flex-wrap: nowrap;
  }
  .cell {
    width: 100%;
  }
  .cell-1 {
    order: 2;
  }
  .cell-2 {
    order: 1;
  }
  .cell-3 {
    order: 3;
  }
}
<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
  <div class="cell cell-1">
    <h2>One</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
  </div>
  <div class="cell cell-2">
    <h2>Two</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
  </div>
  <div class="cell cell-3">
    <h2>Three</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
  </div>
</div>

пересмотренный codepen

3
ответ дан Michael_B 15 August 2018 в 16:34
поделиться
  • 1
    Ах, имеет смысл. Единственная проблема заключается в том, что левый столбец может иметь любую высоту, поэтому мне придется вычислить и увеличить его высоту с помощью JavaScript. – dloewen 27 November 2015 в 20:24
  • 2
    Как это будет работать без height: 500px;? Удаление этого, похоже, убивает макет. – Andrew 3 February 2017 в 02:22
  • 3
    @Andrew, если вы не дадите контейнеру фиксированную высоту, как будут элементы знать, где их обернуть? Они просто будут продолжать расширять контейнер в одном столбце. – Michael_B 3 February 2017 в 03:26
  • 4
    Спасибо @Michael_B, имея фиксированную высоту, был бы прерывником для многих желающих использовать гибкую коробку для этого макета, которую можно легко достичь с помощью других методов (например, поплавков) без форсирования фиксированных высот. – Andrew 3 February 2017 в 05:06

Сначала мы создаем контейнер .Box и устанавливаем ширину и высоту. Честно говоря, это просто для демо, я установил 80vw и 80vh. И этот контейнер должен быть гибким элементом с ориентацией столбцов flex-flow: column wrap;. И мы устанавливаем максимальную ширину наибольших блоков (.BoxItem--large { max-width: 80%; height: 100%; }) на 100% высоты родителей. Он предназначен для переноса других элементов на новую строку / столбец. Поэтому элементы из другого столбца должны заполнять все пространство, поэтому мы устанавливаем .BoxItem--small { max-width: 20%; height: auto; } - да, 80% + 20% == 100%, что математика. позволяет изменять поведение на экранах с низкой шириной. @media screen and (max-width: 600px) { .Box { flex-flow: column nowrap; } } нам не нужно обертывать элементы, поэтому просто измените это. После этого мы хотим, чтобы каждый элемент BoxItem унаследовал ширину родителей. .BoxItem { width: 100%; max-width: 100%; } max-width: 100%; для каскадирования, мы не хотим заботиться о некоторых старых правилах, таких как .BoxItem--large { max-width: 80%; } и .BoxItem--small { max-width: 20%; }. И установите некоторые изменения порядка. 

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #F72F4E;
  overflow: hidden;
}


.Box {
  width: 80vw;
  height: 80vh;
  background-color: rgba(0,0,0,.2);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.BoxItem {
  background-color: #fff;
  border: 1px solid #000;
}
.BoxItem--large {
  max-width: 80%;
  height: 100%;
}
.BoxItem--small {
  max-width: 20%;
  height: auto;
}
@media screen and (max-width: 600px) {
  .Box {
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
  }
  .BoxItem {
    width: 100%;
    max-width: 100%;
  }
  .BoxItem--large {
    height: auto;
  }
  .BoxItem--1 {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
  .BoxItem--2 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  .BoxItem--3 {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }
}
<div class="Box">
  <div class="BoxItem BoxItem--large BoxItem--1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit. Dolores ea unde iste esse illo sit, repellat molestias deleniti, voluptas expedita commodi odio possimus amet?</div>
  <div class="BoxItem BoxItem--small BoxItem--2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
  <div class="BoxItem BoxItem--small BoxItem--3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto omnis rerum ea assumenda velit.</div>
</div>

-1
ответ дан 0x860111 15 August 2018 в 16:34
поделиться
  • 1
    Спасибо, это поможет получить простое объяснение. Кажется, используется тот же метод, что и другой ответ. – dloewen 27 November 2015 в 20:33
  • 2
    @dloewen Сначала мы создаем контейнер .Box и устанавливаем ширину и высоту. честно говоря, это просто для демонстрации i 80vw и 80vh. И этот контейнер должен быть гибким элементом с ориентацией столбцов flex-flow: column wrap; И мы устанавливаем максимальную ширину самых больших блоков (.BoxItem - large {max-width: 80%; height: 100%;}) и 100% высоты родителей. Он предназначен для переноса других элементов на новую строку / столбец. Поэтому элементы из другого столбца должны заполнять все пространство, поэтому мы устанавливаем .BoxItem--small { max-width: 20%; height: auto; } - да, 80% + 20% == 100%, что математика. – 0x860111 28 November 2015 в 05:48
  • 3
    @dloewen ok. позволяет менять bahaviour на экранах с низкой шириной. @media screen and (max-width: 600px) { .Box { flex-flow: column nowrap; } } нам не нужно обертывать элементы, поэтому просто измените это. После этого мы хотим, чтобы каждый элемент BoxItem наследовал ширину родителей. .BoxItem { width: 100%; max-width: 100%; }. max-width: 100%; для каскадирования, мы не хотим заботиться о некоторых старых правилах, таких как .BoxItem--large { max-width: 80%; } и .BoxItem--small { max-width: 20%; }. И установите некоторые изменения порядка. Это он. – 0x860111 28 November 2015 в 05:54
  • 4
    Приведенные выше объяснения являются ключевым компонентом ответа и будут более полезными и более легкими для чтения в качестве части ответа. Раздел комментариев обычно зарезервирован для незначительных проблем. – Michael_B 28 November 2015 в 13:03
  • 5
    @Michael_B получил его, спасибо. Обновленный ответ. – 0x860111 28 November 2015 в 16:32