我正在努力解决一件事。我正在将 psd 编码为 html,但是当我想让我的网站具有响应能力时,我无法用一个 div 解决问题。
https://codepen.io/Dzonyy/pen/jmjOWV
.features_items {
margin: 0 auto;
display: flex;
flex: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.features_item {
padding: 200px 0 100px 0;
text-align: center;
position: relative;
}
.features_items h3 {
padding-top: 80px;
color: #f4d320;
}
.features_item_text {
padding-top: 15px;
line-height: 200%;
}
.features_items_person {
background: url(../images/person.png) top 20% center no-repeat;
}
.features_items_cloud {
background: url(../images/cloud.png) top 20% center no-repeat;
}
.features_items_database {
background: url(../images/database.png) top 20% center no-repeat;
}
.features_items_monitoring {
background: url(../images/screen.png) top 20% center no-repeat;
}
.features_items_person:before,
.features_items_cloud:before,
.features_items_database:before,
.features_items_monitoring:before {
content: "";
position: absolute;
border-bottom: 2px solid #8d8d99;
height: 1px;
width: 15%;
top: 48%;
left: 43%;
}
<div class="features_items">
<figure class="features_item features_items_person">
<h3>Live Support</h3>
<figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption>
</figure>
<figure class="features_item features_items_cloud">
<h3>Cloud Technology</h3>
<figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption>
</figure>
<figure class="features_item features_items_database">
<h3>Hi Tech Database</h3>
<figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption>
</figure>
<figure class="features_item features_items_monitoring">
<h3>Live Monitoring</h3>
<figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption>
</figure>
</div>
总是在同一条车道上? 如何将它们制作成 2 行 2 列,最大宽度 1024px ?
最佳答案
我建议您更改为row
方向,然后使元素换行flex-flow: row wrap;
此外,您还为它们指定至少 35% 的宽度 (flex-basis
),因此一行中不能容纳超过 2 个。
我更新了这 2 条规则,如下所示,它会在较宽的屏幕上为您提供 2 列,在较小的屏幕上为您提供 1 列。
堆栈片段
.features_items {
margin: 0 auto;
display: flex;
flex-flow: row wrap; /* changed property */
justify-content: center;
align-items: center;
}
.features_item {
flex-basis: 35%; /* added property */
padding: 200px 0 100px 0;
text-align: center;
position: relative;
}
.features_items h3 {
padding-top: 80px;
color: #f4d320;
}
.features_item_text {
padding-top: 15px;
line-height: 200%;
}
.features_items_person {
background: url(../images/person.png) top 20% center no-repeat;
}
.features_items_cloud {
background: url(../images/cloud.png) top 20% center no-repeat;
}
.features_items_database {
background: url(../images/database.png) top 20% center no-repeat;
}
.features_items_monitoring {
background: url(../images/screen.png) top 20% center no-repeat;
}
.features_items_person:before,
.features_items_cloud:before,
.features_items_database:before,
.features_items_monitoring:before {
content: "";
position: absolute;
border-bottom: 2px solid #8d8d99;
height: 1px;
width: 15%;
top: 48%;
left: 43%;
}
<div class="features_items">
<figure class="features_item features_items_person">
<h3>Live Support</h3>
<figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption>
</figure>
<figure class="features_item features_items_cloud">
<h3>Cloud Technology</h3>
<figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption>
</figure>
<figure class="features_item features_items_database">
<h3>Hi Tech Database</h3>
<figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption>
</figure>
<figure class="features_item features_items_monitoring">
<h3>Live Monitoring</h3>
<figcaption class="features_item_text">This is Photoshops version of Lorem Ipsum.Proin gravida nibh vel velit auctor aliquet.</figcaption>
</figure>
</div>
关于css - 努力应对响应式设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44245995/