Составление 2 списков бок о бок - PullRequest
Новая
       6

Составление 2 списков бок о бок

0 голосов
/ 15 мая 2019

Так что у меня проблемы с выравниванием двух списков рядом друг с другом. Я создал дизайн для мобильных устройств и сделал его таким, каким я хотел бы его видеть. Сейчас я использую медиа-запросы в CSS, чтобы изменить сайт для рабочего стола, но не могу заставить его работать.

Вот как выглядит контейнер в мобильной версии:

https://imgur.com/IkweYOE

Я пытаюсь добиться следующего после разрешения, превышающего 450px:

https://imgur.com/smbyEcq

.firstthree {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5em;
}

.secondthree {
    display: flex;
    justify-content: space-between;
    position: relative;
    bottom: -25px;
    padding: 0 0.5;
}
<div class="white-container">
    <div class="container">
        <div>
            <ul class="firstthree">
                <li>
                    <img src="images/brush.svg" class="brush" alt="brush">
                    <p class="brush">Graphic Design</p>
                </li>
                <li>
                    <img src="images/wand.svg" class="wand" alt="wand">
                    <p class="wand">UI Design</p>
                </li>
                <li>
                    <img src="images/code.svg" class="code2" alt="code">
                    <p class="code">Front-end Dev</p>
                </li>
            </ul>
        </div>

        <div>
            <ul class="secondthree">
            <li>
                <img src="images/settings.svg" class="settings" alt="settings">
                <p class="settings">Back-end Dev</p>
            </li>
            <li>
                <img src="images/database.svg" class="database" alt="databases">
                <p class = "database">Databases</p>
            </li>
            <li>
                <img src="images/mobile.svg" class="mobile" alt="mobile">
                <p class="mobile">Mobile Devices</p>
            </li>
        </ul>
        </div>
    </div>
</div>

float left, похоже, не работает. Спасибо

Ответы [ 4 ]

2 голосов
/ 15 мая 2019

Я не уверен, почему люди говорят вам использовать Bootstrap для чего-то такого простого. использование flex-basis вместе с flex-wrap довольно легко даст вам тот же результат.

(откройте мой пример на полной странице, чтобы пример с минимальной шириной показывал) 

.c-list {
display:flex;
flex-wrap:wrap;
}
.c-list__item{
  flex-basis:33%;
  list-style:none;
  text-align:center;
}

@media only screen and (min-width: 700px) {
  .c-list{
    flex-wrap:nowrap;
  }
}
<div class='container '>
  <ul class='c-list'>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>Graphic Design</p></li>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>UI Design</p></li>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>Front-end Dev</p></li>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>Back-end Dev</p></li>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>Databases</p></li>
    <li class='c-list__item'><img src='https://via.placeholder.com/70' alt=''><p>Mobile Devices</p></li>
  </ul> 
</div>
1 голос
/ 15 мая 2019

Дайте контейнеру вокруг вашего списка класс, например, icon-wrapper И нарисуйте его следующим образом: 

.icon-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.firstthree, .secondthree {
    min-width: 225px;
    box-sizing: border-box;
}

Дочерние объекты в обертке имеют размер 1/2 от размера, который вы хотите разбитьЭто.С помощью flex они будут выровнены в линию.

1 голос
/ 15 мая 2019

Я сделал это с boostrap.Скажи мне, может ли это быть хорошо для тебя.Для вашего разрешения> 450 пикселей, просто посмотрите на https://getbootstrap.com/docs/4.0/layout/grid/, и это может вам помочь.Это не очень сложно использовать. 

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      <img src="images/brush.svg" class="brush" alt="brush">
      <p class="brush">Graphic Design</p>
    </div>
    <div class="col">
      <img src="images/wand.svg" class="wand" alt="wand">
      <p class="wand">UI Design</p>
    </div>
    <div class="col">
       <img src="images/code.svg" class="code2" alt="code">
       <p class="code">Front-end Dev</p>
    </div>
  </div>  

  <div class="row">
    <div class="col">
       <img src="images/settings.svg" class="settings" alt="settings">
       <p class="settings">Back-end Dev</p>
    </div>
    <div class="col">
       <img src="images/database.svg" class="database" alt="databases">
       <p class = "database">Databases</p>
    </div>
    <div class="col">
       <img src="images/mobile.svg" class="code2" alt="code">
       <p class="code">Mobiles Devices</p>
    </div>
  </div>  
</div>

https://jsfiddle.net/ye1ntc6s/

0 голосов
/ 15 мая 2019

Как сказал Аарон в своем ответе, вам не нужен ни начальный загрузчик, ни такое количество разметки, чтобы достичь этого. Вы можете использовать flexbox с flex-base и flex-wrap. 

.container{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.container li{
  flex-basis:33.33%;
}
@media screen and (min-width:700px){
  .container{
    flex-wrap:nowrap;
  }
}
<ul class="container">
  <li>
    <img src="images/brush.svg" class="brush" alt="brush">
    <p class="brush">Graphic Design</p>
  </li>
  <li>
    <img src="images/wand.svg" class="wand" alt="wand">
    <p class="wand">UI Design</p>
  </li>
  <li>
    <img src="images/code.svg" class="code2" alt="code">
    <p class="code">Front-end Dev</p>
  </li>

  <li>
    <img src="images/settings.svg" class="settings" alt="settings">
    <p class="settings">Back-end Dev</p>
  </li>
  <li>
    <img src="images/database.svg" class="database" alt="databases">
    <p class="database">Databases</p>
  </li>
  <li>
    <img src="images/mobile.svg" class="mobile" alt="mobile">
    <p class="mobile">Mobile Devices</p>
  </li>
</ul>

Или, если вас не беспокоит IE 11 Совместимость , вы также можете использовать CSS-сетку с методом авто-подгонки, так что вы полностью избавитесь от необходимости медиазапросов. 

.container{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ) 
}

/* 
repeat is the css gread method for repeating columns or rows, 
auto-fit will look for the available space,
min-max is the CSS Grid method for deciding a minimum and maxium size for either columns or rows
fr is the CSS Grid measure unit for available space in the grid container 
*/ 
<ul class="container">
  <li>
    <img src="images/brush.svg" class="brush" alt="brush">
    <p class="brush">Graphic Design</p>
  </li>
  <li>
    <img src="images/wand.svg" class="wand" alt="wand">
    <p class="wand">UI Design</p>
  </li>
  <li>
    <img src="images/code.svg" class="code2" alt="code">
    <p class="code">Front-end Dev</p>
  </li>

  <li>
    <img src="images/settings.svg" class="settings" alt="settings">
    <p class="settings">Back-end Dev</p>
  </li>
  <li>
    <img src="images/database.svg" class="database" alt="databases">
    <p class="database">Databases</p>
  </li>
  <li>
    <img src="images/mobile.svg" class="mobile" alt="mobile">
    <p class="mobile">Mobile Devices</p>
  </li>
</ul>

Если вы действительно хотите контролировать в своей CSS-таблице то, как макет выглядит при разных разрешениях, вы можете вручную указать столбцы шаблона, используя единицу измерения fr. Как это: 

.container{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr /* three equal columns that uses all the available space */
}

@media screen and (min-width:700px){
  .container{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr /* six equal columns that uses all the available space */
  }
}
<ul class="container">
  <li>
    <img src="images/brush.svg" class="brush" alt="brush">
    <p class="brush">Graphic Design</p>
  </li>
  <li>
    <img src="images/wand.svg" class="wand" alt="wand">
    <p class="wand">UI Design</p>
  </li>
  <li>
    <img src="images/code.svg" class="code2" alt="code">
    <p class="code">Front-end Dev</p>
  </li>

  <li>
    <img src="images/settings.svg" class="settings" alt="settings">
    <p class="settings">Back-end Dev</p>
  </li>
  <li>
    <img src="images/database.svg" class="database" alt="databases">
    <p class="database">Databases</p>
  </li>
  <li>
    <img src="images/mobile.svg" class="mobile" alt="mobile">
    <p class="mobile">Mobile Devices</p>
  </li>
</ul>

По возможности я рекомендую использовать CSS Grid, так как он более семантический и более простой в обслуживании.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...