Question

因此，我很难将两个列表并排对齐。我已经创建了移动优先设计，并使其达到了我希望的外观。现在，我要在CSS中使用媒体查询来更改桌面网站，但无法使其正常工作。

这是容器当前在移动版本中的外观：

在分辨率大于450px之后，我试图实现以下目标：

reject

.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;
}

向左浮动似乎不起作用。谢谢

Answer 1

我不确定为什么有人告诉您将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>

Answer 2

我用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/

Answer 3

给列表周围的容器一个类，例如icon-wrapper 并将其样式设置如下：

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

包装纸中的孩子的尺寸是您要破坏的尺寸的1/2。使用flex时，它们将内联对齐。

Answer 4

正如亚伦（Aaron）在回答中所说，您既不需要引导程序，也不需要那么多标记。您可以将flexbox与flex-basis和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，因为它更具语义且易于维护。

并排创建2个列表

4 个答案: