Wie Display-Tabelle und Floating divs mit gleicher Höhe haben

Question

Ich benutze Anzeige: Tabelle-Celle und Anzeige: Tabelle, um meine Divs die gleiche Höhe zu geben und es funktioniert perfekt. Ich habe gerade ein Problem mit der Höhe meiner Divs, wenn ich Float hinzufügen möchte. Hier

ist das, was ich will: example

hier ist mein jsfiddle: https://jsfiddle.net/kodjoe/Lsszt0aa/4/

hier ist mein HTML-Code:

<div class="allcol"> 
<div class="col1">item #1<br/>item #1<br/>1item #1</div> 
<div class="col2">item #2</div> 
</div> 

<div class="allcol"> 
<div class="col1b">item #4<br/>item #4</div> 
<div class="col2">item #3</div> 
</div> 

<div class="allcol"> 
<div class="col1">item #5<br/>item #5</div> 
<div class="col2">item #6</div> 
</div> 

<div class="allcol"> 
<div class="col1b">item #8</div> 
<div class="col2">item #7</div> 
</div> 

hier ist mein CSS-Code:

.allcol { width: 100%; display:table; } 

.col1, .col2, .col1b { width: 50%; display: table-cell; } 

.col1, .col1b { background-repeat: no-repeat; background-position: center center; background:tomato; } 

.col2 { padding:80px 0px; vertical-align: middle; background:#fafafa;} 

.col1, .col2 {float:left;} 

.col1b { float: right; } 

h2.textcol2 {padding:8em 8em 0em 8em; text-align:center; color:#e07532; } 

p.textcol2 {padding:0em 8em 8em 8em; text-align:center; } 

.marginimg { margin:30px; } 

@media screen and (max-width:1169px) { 
.col1, .col2, .col1b { width: 100%; text-align: center; } 
.col2 { padding:80px 0px; } 
.marginimg { margin:0px; } 
} 

@media screen and (max-width: 768px) { 
.inline-items li:last-child { padding-right: 0; } 
.containerpage { margin-top:200px;} 
.col2 { padding:80px 0px; } 
} 

Answer 1

Überprüfen Sie dies.

HTML

<div class="container"> 
    <div class="box">1<br>Item 1</div> 
    <div class="box">2</div> 
    <div class="box">3</div> 
    <div class="box">4</div> 
</div> 

CSS

.container{ 
    display: flex; 
    width: 100%; 
    flex-wrap: wrap; 
} 
.box{ 
    box-sizing:border-box; 
    background: gold; 
    text-align: center; 
    flex-grow:1; 
    flex-basis: 50%; 
    border: 2px solid #000; 
    padding: 15px; 
} 
@media screen and (max-width: 768px) { 
    .box{ 
    flex-basis: 100%; 
    } 
    .box:nth-child(3){ 
    order:4; 
    } 
} 

Answer 2

Sie nicht Schwimmer und table-cell beide Eigenschaft gleichzeitig nutzen können. Beide arbeiten in unterschiedlichen Zwecken.

Bitte überprüfen Sie unter Code

.allcol {display: table; table-layout: fixed; width: 100%;} 
 
.col1, .col2, .col1b { width: 50%; display: table-cell; padding:20px; text-align:center;} 
 
.col1, .col1b { background-repeat: no-repeat; background-position: center center; background:tomato; } 
 

 
@media screen and (max-width:1169px) { 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
.allcol {display:block;} 
 
.col1, .col2, .col1b { width: 100%; display:block;} 
 
}

<div class="allcol"> 
 
    <div class="col1">item #1</div> 
 
    <div class="col2">item #2</div> 
 
    </div> 
 

 
    <div class="allcol"> 
 
    <div class="col1b">item #3</div> 
 
    <div class="col2">item #4</div> 
 
    </div>