Question

我有一个简单的div包含产品信息（图像，标题，描述，价格等）。我正在使用bootstrap（3.x）在桌面上，我使用div的特定高度，所以一切都相同，显示在2列中。在Mobile上，我只有一列，我想找到一种方法来根据大小调整div高度，而不是设置特定的像素高度（描述各不相同，可以更改div的高度）。这可能吗？ div是从数据库动态创建的...... 这是当前的css - 正如你所看到的，我现在正用像素设置高度。

.prodBox2 { 
height: 300px;
margin-bottom: 10px;
padding:5px; 
border: 3px solid #666666;
border-radius:25px;
font-family: arial;
font-size: .8em;
color: rgb(50, 50, 50);
}
.prodImage2 {
float: left;
margin: 10px;
width: 125px;
height: auto;
}

如果它有帮助，这是一个codlin链接： http://codepen.io/shadowfax007/pen/xVqQNm

Answer 1

默认情况下，任何div的高度都是动态的。所以你需要做的就是在媒体查询中包含高度条件（屏幕宽度超过768px）：

@media(min-width: 768px) {
  .prodBox2 {
    height: 300px;
    overflow-y: auto;
  }
}
.prodBox2 {
  margin-bottom: 10px;
  padding: 5px;
  border: 3px solid #666666;
  border-radius: 25px;
  font-family: arial;
  font-size: .8em;
  color: rgb(50, 50, 50);
}
.prodImage2 {
  float: left;
  margin: 10px;
  width: 125px;
  height: auto;
}

作为旁注，你可能想要对响应性做一些阅读，你目前做错了。在任何良好的响应式设计中，您无需指定高度。

为div创建动态高度

1 个答案: