2017-05-29 11 views
2

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?

+0

Flex Container standardmäßig 'no-wrap', machen nur den Container' flex-wrap: wrap' https: // css -tricks.com/snippets/css/a-guide-to-flexbox/ – Huangism

+1

Wollen Sie Bootstrap verwenden oder nicht? –

Antwort

2

empfehle ich Ihnen zu row Richtung ändern und dann die Elemente flex-flow: row wrap;

wickeln machen Zusätzlich Sie ihnen geben eine Breite (flex-basis), die mindestens 35% ist, so kann es nicht mehr passen als 2 in einer Reihe .

Ich aktualisierte diese 2 Regeln wie unten, es wird Ihnen 2 Spalten auf größeren Bildschirmen und 1 auf kleiner geben.

Updated codepen

Stapel Snippet

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

+0

Sie sind ein Star! –

+0

@ DżekSparoł Danke ... und bitte akzeptieren Sie auch meine Antwort, indem Sie auf das graue Häkchen links oben auf meiner Antwort klicken – LGSon

+0

Kein Problem Kumpel! –