由于图像尺寸

时间:2017-11-30 18:40:43

标签: html css twitter-bootstrap

Wrong alignation

expected alignation

错误的对齐   预期的对齐 你可以从图片中清楚地看到,每当我有一些不规则高度的图片时,我就会有这样的对齐问题。我尝试从css改变但没有任何建议吗? 图像被包含在div中,只有属性设置为宽度:100%我尝试改变高度,但对我来说没有用。如果图像大小大于800x600像素,则可以正常工作

代码(仅粘贴图像div和css,因为我知道图像属性中存在问题)

.product .product-image img {
    width: 100%;
}
bootstrap.min.css:
img {
    vertical-align: middle;
}
bootstrap.min.css:
img {
    border: 0;
}

1 个答案:

答案 0 :(得分:0)

经过5000多行CSS 我能够得到这样的东西。

<强> WORKING EXAMPLE

将这些添加到您的文件中:

<强>的main.css

.product {
  min-height: 350px;
  position: relative;
}

.product .product-info .product-price .price {
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  margin-right: 8px;
  position: absolute;
  bottom: 10px;
}

.product .product-info .product-price .price-before-discount {
  text-decoration: line-through;
  color: #d3d3d3;
  font-weight: 400;
  line-height: 30px;
  font-size: 14px;
  position: absolute;
  bottom: 10px;
  right: 60px;
}

.rateit {
  position: absolute;
  bottom: 40px;
}

.name {
  position: absolute;
  bottom: 60px;
}

<强> rateit.css

.rateit{
    position:absolute;
}
  

注意:我刚刚为大尺寸设备添加了,请相应地使用媒体查询