Как иметь таблицу отображения и плавающие divs с одинаковой высотой

Question

Я использую display: table-celle и display: table, чтобы дать ту же высоту моим divs, и он отлично работает. У меня просто проблема с высотой моих div, когда я хочу добавить float к ним.

Вот что я хочу: example

вот мой jsfiddle: https://jsfiddle.net/kodjoe/Lsszt0aa/4/

вот мой HTML код:

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

вот мой CSS код:

.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

Проверьте это.

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

Вы не можете использовать поплавок и настольный ячейки как свойство одновременно. Оба работают в разных целях.

Пожалуйста, проверьте ниже код

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