Question

我使用display：table-celle和display：table给我的div提供相同的高度，它完美无缺。当我想向他们添加浮动时，我的div高度有问题。

这就是我想要的： 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

您不能同时使用float和table-cell这两个属性。两者都在不同的目的。

请检查以下代码

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

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

2 个答案: