Richten Sie die Kästen nebeneinander und ansprechend aus

Question

Ich versuche, 6 Kästen neben jeder für lg zu haben. Dann 4, dann 3, dann 2. Ich kann nicht herausfinden, wie man die Breite für jede Box macht und auch nicht verstehen kann, warum die Ränder zwischen den Boxen so groß sind, wenn ich 4 Boxen nebeneinander habe, auch wenn 3 Boxen und 2 Boxen. Wie kann man diesen Code optimal für die Reaktionsfähigkeit machen, wo die linken/rechten Ränder immer 20px betragen können und die Breite der Box sich an die Bildschirmgröße anpasst (jetzt bei kleinen Bildschirmen mit 2 Boxen zusammen überlappen sich die Boxen)? Ich habe Flexbox ausprobiert, funktioniert aber nicht für mich. Ich möchte die von mir begonnene Lösung wie hier gezeigt fortsetzen. Vielen Dank.

.box2 { 
 
    margin: 5px 5px 5px 0; 
 
    text-align: center; 
 
    float: left; 
 
    background-color: yellow; 
 
    color: #000; 
 
    border: 5px solid blue; 
 
    height: auto; 
 
    width: 160px; 
 
    font-size: 12px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container overview-sm"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-alpha-sm" title="alpha"> 
 
      <h1>Alpha</h1> 
 
\t \t \t </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-beta-sm" title="beta"> 
 
      <h1>Beta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-gamma-sm" title="gamma"> 
 
      <h1>Gamma</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-delta-sm" title="delta"> 
 
      <h1>Delta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-omega-sm" title="omega"> 
 
      <h1>Omega</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-pie-sm" title="pie"> 
 
      <h1>Pie</h1> 
 
\t \t \t </a></div> 
 
     </div> 
 
    </div>

Answer 1

Zuerst width: 100% auf box so dauert es volle Breite der Spalte sollte. Sie verwenden Bootstrap, damit der Abstand zwischen den Spalten in der Bootstrap-Datei definiert wird und Sie können diese here namens @grid-gutter-width ändern und diese Bootstrap-Datei herunterladen.

.box2 { 
 
    margin: 5px 5px 5px 0; 
 
    text-align: center; 
 
    background-color: yellow; 
 
    color: #000; 
 
    display: inline-block; 
 
    border: 5px solid blue; 
 
    width: 100%; 
 
    font-size: 12px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container overview-sm"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-alpha-sm" title="alpha"> 
 
     <h1>Alpha</h1> 
 
     </a> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-beta-sm" title="beta"> 
 
     <h1>Beta</h1> 
 
     </a> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-gamma-sm" title="gamma"> 
 
     <h1>Gamma</h1> 
 
     </a> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-delta-sm" title="delta"> 
 
     <h1>Delta</h1> 
 
     </a> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-omega-sm" title="omega"> 
 
     <h1>Omega</h1> 
 
     </a> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-pie-sm" title="pie"> 
 
     <h1>Pie</h1> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Probieren Sie etwas wie dies für Ihre mit CSS, Prozentsätze anstelle von festen px und vw statt px oder pt für font-size.

.box2 { 
margin: 5% 5% 5% 0; 
text-align: center; 
float: left; 
background-color: yellow; 
color: #000; 
border: 5px solid blue; 
height: auto; 
width: 61%; 
font-size: 2.5vw; 

}

Answer 3

vielleicht wird diese Ihnen helfen,

.box2 { 
    width: 100%; 
} 

siehe ex unter

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 

 
.box2 { 
 
    margin: 5px 5px 5px 0; 
 
    text-align: center; 
 
    float: left; 
 
    background-color: yellow; 
 
    color: #000; 
 
    border: 5px solid blue; 
 
    height: auto; 
 
    width: 100%; 
 
    font-size: 12px; 
 
}

<div class="container overview-sm"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-alpha-sm" title="alpha"> 
 
      <h1>Alpha</h1> 
 
\t \t \t </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-beta-sm" title="beta"> 
 
      <h1>Beta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-gamma-sm" title="gamma"> 
 
      <h1>Gamma</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-delta-sm" title="delta"> 
 
      <h1>Delta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-omega-sm" title="omega"> 
 
      <h1>Omega</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-pie-sm" title="pie"> 
 
      <h1>Pie</h1> 
 
\t \t \t </a></div> 
 
     </div> 
 
    </div>

Answer 4

Ist das Ergebnis Sie wollen?

.box2 { 
 
    margin: 5px 2px 2px 0; 
 
    text-align: center; 
 
    float: left; 
 
    background-color: yellow; 
 
    color: #000; 
 
    border: 5px solid blue; 
 
    height: auto; 
 
    font-size: 12px; 
 
    padding:5px 10px; 
 
}

<div class="container overview-sm"> 
 
     <div class="row"> 
 
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-alpha-sm" title="alpha"> 
 
      <h1>Alpha</h1> 
 
\t \t \t </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-beta-sm" title="beta"> 
 
      <h1>Beta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-gamma-sm" title="gamma"> 
 
      <h1>Gamma</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-delta-sm" title="delta"> 
 
      <h1>Delta</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-omega-sm" title="omega"> 
 
      <h1>Omega</h1> 
 
     </a></div> 
 
\t \t <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
 
     <a href="#" class="box2 dfs-pie-sm" title="pie"> 
 
      <h1>Pie</h1> 
 
\t \t \t </a></div> 
 
     </div> 
 
    </div>