因此,我很难将两个列表并排对齐。我已经创建了移动优先设计,并使其达到了我希望的外观。现在,我要在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;
}
向左浮动似乎不起作用。谢谢
答案 0 :(得分:2)
我不确定为什么有人告诉您将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 :(得分:1)
我用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>
答案 2 :(得分:1)
给列表周围的容器一个类,例如icon-wrapper
并将其样式设置如下:
.icon-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.firstthree, .secondthree {
min-width: 225px;
box-sizing: border-box;
}
包装纸中的孩子的尺寸是您要破坏的尺寸的1/2。使用flex时,它们将内联对齐。
答案 3 :(得分:0)
正如亚伦(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,因为它更具语义且易于维护。