Html 如何使显示表和浮动div具有相同的高度

我使用display:table单元格和display:table来给我的div赋予相同的高度，它工作得非常完美。当我想给div添加float时，我只是对div的高度有个问题

以下是我想要的：

这是我的JSFIDLE：

这是我的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>

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

看看这个

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>

看看这个

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>

---

不能同时使用float和table cell这两个属性。 两者的工作目的不同

请检查下面的代码

.allcol{显示：表格；表格布局：固定；宽度：100%；}
.col1、.col2、.col1b{宽度：50%；显示：表格单元格；填充：20px；文本对齐：居中；}
.col1、.col1b{背景重复：无重复；背景位置：中心；背景：番茄；}
@媒体屏幕和（最大宽度：1169px）{
}
@媒体屏幕和屏幕（最大宽度：768px）{
.allcol{display:block；}
.col1、.col2、.col1b{宽度：100%；显示：块；}
}

项目#1
项目#2
项目#3
项目4

不能同时使用float和table cell这两个属性。 两者的工作目的不同

请检查下面的代码

.allcol{显示：表格；表格布局：固定；宽度：100%；}
.col1、.col2、.col1b{宽度：50%；显示：表格单元格；填充：20px；文本对齐：居中；}
.col1、.col1b{背景重复：无重复；背景位置：中心；背景：番茄；}
@媒体屏幕和（最大宽度：1169px）{
}
@媒体屏幕和屏幕（最大宽度：768px）{
.allcol{display:block；}
.col1、.col2、.col1b{宽度：100%；显示：块；}
}

项目#1
项目#2
项目#3
项目4

您应该使用flexbox@John如果我使用display:flexbox，我想我不能使用float？你也不能使用float表单元格。是的，我看到了；）在这个时候，我已经创建了2个没有浮动和不同的内容内的响应设计div！！！我一直在寻找其他解决方案！！你应该使用flexbox@John如果我使用display:flexbox，我想我不能使用float？你也不能使用float表单元格。是的，我看到了；）在这个时候，我已经创建了2个没有浮动和不同的内容内的响应设计div！！！我一直在寻找其他解决方案！！检查这个JSFIDLE，当你站起来时，你有两次img div，没有一个div文本和另一个img，…：检查这个JSFIDLE，当你站起来时，你有两次img div，没有一个div文本和另一个img，…：