Wie haben reagiert, Text und divs nebeneinander

Question

Ich möchte in einer einzigen Zeile Text und 3 divs haben, in der zweiten Zeile einen anderen Text und drei weitere divs usw. Zeit das ist, wie es wie sieht und mein Code

svg { 
    margin-left: 0%; 
    float: left; 
    height: 12%; 
    width: 28%; 
} 
h2{ 
    left: 2%; 
    font-size: 2em; 
    padding-top: 180px; 
    top: -40px; 
} 

ich kann nicht Klassennamen verwenden, da jede div eine andere hat, die dynamisch bekommt, und es gibt mehr als dreißig divs. Deshalb versuche ich es zu beheben, indem ich die Elemente h2 und div als Elemente verwende.

ich mit diesem Code verwaltet

div { 
     margin-left: 10px; 
     float: right; 
     bottom: 1852px; 
     position: relative; 
     height: 12%; 
     width: 28%; 
    } 
    h2{ 
     left: 2%; 
     position: relative; 
     font-size: 2em; 
     padding-top: 180px; 
     top: -40px; 
    } 

zu erreichen, was ich

versucht, aber es ist anders in verschiedenen Bildschirmen. Manchmal werden 4 Divs und 2 Divs angezeigt. Ich versuchte Position: behoben, aber konnte es nicht schaffen. Ich kenne mich mit CSS nicht aus, und ich kämpfe wirklich darum.

Answer 1

Erstellen Sie divs mit percentage. Oder Sie können calc() für die Berechnung der Ränder für die Box verwenden.

.box-container { 
    border: 1px solid #500; 
} 
.box { 
    display: inline-block; 
    width: 20%; 
} 
.box-text { 
    display: inline-block; 
    padding: 10px; 
    box-sizing: border-box; 
    width: 40%; 
} 
.content { 
    box-sizing: border-box; 
    border: 1px solid red; 
} 
.inner { 
    margin: 10px; 
    padding: 10px; 
    background-color: #CCC; 
} 

Andere Lösung ist create another div innerhalb div Feld und Ränder hinzufügen.

Answer 2

Verwenden Sie display:table, display:table-row und display:table-cell Kombination wie folgt und halten Sie Elemente perfekt an Ort und Stelle.

html, body { 
 
    height: 100%; /* just in case you want it to span whole height */ 
 
    margin: 0; /* otherwise dont use this */ 
 
    padding: 0; 
 
} 
 
div.table { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; /* just in case you want it to span whole height */ 
 
    /* otherwise use a custom height */ 
 
} 
 
div.table-row { 
 
    display: table-row; 
 
} 
 
.table-cell { 
 
    display: table-cell; 
 
    padding: 10px; /* creating gaps */ 
 
    vertical-align: middle; /* aligning to middle */ 
 
} 
 
div.table-cell { 
 
    width:25%; /* width of the content parent */ 
 
} 
 
div.content { 
 
    background-color: grey; 
 
    height: 100%; 
 
}

<div class="table"> 
 
    <div class="table-row"> 
 
    <h2 class="table-cell">text 1</h2> 
 
    <div class="table-cell"><div class="content"></div></div> 
 
    <div class="table-cell"><div class="content"></div></div> 
 
    <div class="table-cell"><div class="content"></div></div> 
 
    </div> 
 
    <div class="table-row"> 
 
    <h2 class="table-cell">text 2</h2> 
 
    <div class="table-cell"><div class="content"></div></div> 
 
    <div class="table-cell"><div class="content"></div></div> 
 
    <div class="table-cell"><div class="content"></div></div> 
 
    </div> 
 
    <div class="table-row"> 
 
    <h2 class="table-cell">text 3</h2> 
 
    <div class="table-cell"><div class="content"></div></div> 
 
    <div class="table-cell"><div class="content"></div></div> 
 
    <div class="table-cell"><div class="content"></div></div> 
 
    </div> 
 
</div>