Ich habe mit einer Sache zu kämpfen. Ich kodiere psd zu html, aber wenn ich meine Seite reaktionsfähig machen will, kann ich das Problem mit einem div nicht beheben.Kämpfen mit responsive Design
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>
sind immer in der gleichen Spur? Wie man sie in 2 Reihen mit 2 Spalten bei maximaler Breite 1024px macht?
Flex Container standardmäßig 'no-wrap', machen nur den Container' flex-wrap: wrap' https: // css -tricks.com/snippets/css/a-guide-to-flexbox/ – Huangism
Wollen Sie Bootstrap verwenden oder nicht? –