Wie drei divs (links/Mitte/rechts) für den Einstieg in kleinen Bildschirm links/rechts und darunter zentrieren Element

Ich habe drei divs links - Mitte - rechts, ich brauche im Fall, wenn das Dokument in mobilen geöffnet ist,Wie drei divs (links/Mitte/rechts) für den Einstieg in kleinen Bildschirm links/rechts und darunter zentrieren Element

linke und rechte Elemente in einer Zeile zu zeigen, und unter ihnen zentralen Elemente

ich brauche:

a) PC 

     [left] [ long text in center ] [right] 

b) PC smaller screen !impartant! 

     [left] [ long text  [right] 
       in center ] 

c) Mobile (smaller then 736px) 

     [left] [right] 
     [ text in center ]

ich finde Lösung habe für (a) und (c) Fälle, aber es funktioniert nicht für mittleres Gehäuse (b)

Blick: http://jsfiddle.net/66fCm/692/

.wrap { 
 
    text-align: center 
 
} 
 
.left { 
 
    float: left; 
 
    background: grey 
 
} 
 
.right { 
 
    float: right; 
 
    background: red 
 
} 
 
.center { 
 
    text-align: left; 
 
    background: green; 
 
    margin: 0 auto !important; 
 
    display: inline-block 
 
}

<div class="wrap"> 
 
    <div class="left"> 
 
    left 
 
    </div> 
 
    <div class="right"> 
 
    right 
 
    </div> 
 
    <div class="center"> 
 
    center | Far far away, behind the word mountains, far from 
 
    </div> 
 
</div>

Quelle

2017-01-25 Arthur

ich brauche alle drei Fälle (a, b und c) jeder von ihnen für verschiedene Bildschirmgrößen – Arthur

NEW/VERÄNDERUNG DER ANTWORT:

Wenn Sie die Reihenfolge ändern, wie unten gezeigt und Medienabfragen verwenden, können Sie zwischen Flexbox für große Bildschirme wechseln und eine kombinierte Schwimmer/Nichtschwimmer Szenario auf kleineren Bildschirmen wie unten gezeigt.

http://jsfiddle.net/fj6op9jb/

.wrap { 
 
    display: flex; 
 
} 
 

 
.left { 
 
    background: grey 
 
} 
 

 
.right { 
 
    background: red; 
 
    order: 2; 
 
} 
 

 
.center { 
 
    background: green; 
 
    margin: 0 auto !important; 
 
} 
 

 
@media (max-width: 500px) { 
 
    .wrap { 
 
    display: block; 
 
    text-align: center; 
 
    } 
 
    .left { 
 
    float: left; 
 
    } 
 
    .right { 
 
    float: right; 
 
    } 
 
    .center { 
 
    clear: both; 
 
    display: inline-block; 
 
    text-align: center; 
 
    } 
 
}

<div class="wrap"> 
 
    <div class="left"> 
 
    left 
 
    </div> 
 
    <div class="right"> 
 
    right 
 
    </div> 
 
    <div class="center"> 
 
    center | A collection of textile samples lay spread out on the table 
 
    </div> 
 
</div>

Quelle

2017-01-25 12:43:20 Johannes

beste Antwort , Vielen Dank – Arthur

Versuchen Sie dies. Stellen Sie 100% Breite auf das mittlere Element im mobilen Bildschirm ein. Ich habe das Code-Snippet angehängt.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     .wrap { 
 
      text-align: center 
 
     } 
 
     
 
     .left { 
 
      float: left; 
 
      background: grey 
 
     } 
 
     
 
     .right { 
 
      float: right; 
 
      background: red 
 
     } 
 
     
 
     .center { 
 
      text-align: left; 
 
      background: green; 
 
      margin: 0 auto !important; 
 
      display: inline-block 
 
     } 
 
     
 
     @media only screen and (max-width: 736px) { 
 
      .wrap { 
 
       text-align: center 
 
      } 
 
      .left { 
 
       float: left; 
 
       background: grey 
 
      } 
 
      .right { 
 
       float: right; 
 
       background: red 
 
      } 
 
      .center { 
 
       text-align: left; 
 
       width: 100%; 
 
       background: green; 
 
       margin: 0 auto !important; 
 
       display: inline-block 
 
      } 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div class="wrap"> 
 
     <div class="left"> 
 
      left 
 
     </div> 
 
     <div class="right"> 
 
      right 
 
     </div> 
 
     <div class="center"> 
 
      center | A collection of textile samples lay spread out on the table 
 
     </div> 
 
    </div> 
 

 

 

 
</body> 
 

 
</html>

Quelle

2017-01-25 12:28:15 Nitheesh

@ arthur_3589897 Alle A, B und C Fälle gibt es. Im großen und mittleren Bildschirm passt der Inhalt wie von Ihnen erwähnt und für mobile Bildschirme wird das Center div mit 100% Breite sein. Bitte testen Sie durch Kopieren das Einfügen des Skripts in eine HTML-Datei mit unterschiedlichen Bildschirmgrößen. – Nitheesh

ja, du hast Recht, es funktioniert, danke – Arthur

Um die div.center zusammenklappbar, damit Sie max-width auf sie verwenden könnte und legen Sie es Block angezeigt werden soll.

eine Medienabfrage für die Größen hinzufügen, wenn das div kollabiert zB beginnen soll:

@media screen and (min-width: 400px) and (max-width: 550px) { 
    .center { 
    display: block; 
    max-width: 370px; 
    } 
}

Sie

http://jsfiddle.net/66fCm/693/

ändern, was auch immer die minimale und maximale Breite müssen sich auf der Medienabfrage sein, und wie groß will die div.center sein.

Quelle

2017-01-25 12:40:33 jonnow

Ich habe dein Beispiel versucht - es hat mir geholfen, nach der Aktualisierung Ihres Codes habe ich, was ich brauche http://jsfiddle.net/66fCm/694/ Vielen Dank – Arthur

Wie drei divs (links/Mitte/rechts) für den Einstieg in kleinen Bildschirm links/rechts und darunter zentrieren Element

Antwort

Verwandte Themen