Question

我正在创建一个网站，让我先显示代码：

的CSS：

<style type="text/css">
    body {
        font-family: "helvetica neue",arial,sans-serif;
        font-size: 28px;
        background-color: #edece9;
    }
    .card {
        width: 250px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
        float: left;
        margin-right: 10px;
        margin-bottom: 11px;
    }
    .footer {
        color: #fff;
        padding: 10px;
        font-size: 15px;
        height: 50px;
    }
    .body {
        padding: 0px;
    }
    .body p {
        margin-left: 5px;
    }
    .screen-shot {
        width: 100%;
    }
</style>

HTML：

<div class="card">
    <div class="body">
    <img src="" class="screen-shot">
</div>
<div class="footer" style="background-color: #4caf50;">
    <p>
        <a title="查看详情" style="cursor: pointer; color:white">项目名称一</a>
    </p>
</div>
</div>

现在让我告诉你错误，类'body'的'padding'属性之前是10px，网络看起来像这样：

上一页：

卡片类型的盒子布局没有错，这就是我想要的，但它在图片周围有白色填充，看起来不太好，所以我删除了类'body'的'padding'属性，如我所愿，图片没有白色填充。但是出现了另一个问题，一些空白区域出现了：

页面错误：

我尝试了1,2,3 px中的'padding'，这也错了，这个bug太奇怪了。我想制作picture1的盒子类型布局而且图片没有填充。我不知道如何描述问题，所以我发布代码和截图，它们是最好的描述。

Answer 1

＆＃13;

    .card {
        width: 200px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
        margin-right: 10px;
        margin-bottom: 11px;
        float: left;
    }
    .footer {
        color: #fff;
        padding: 10px;
        font-size: 15px;
        height: 50px;
    }
    .body  {
        padding: 0px;
        overflow: hidden;
        height: 200px;
    }
    .body p {
        margin-left: 5px;
    }
    .screen-shot {
        width: 100%;
        padding:0px;
        height: 100%;
    }

＆＃13;

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div class="card">
    <div class="body">
      <img src="https://www.w3schools.com/css/img_fjords.jpg" 				class="screen-shot">
   </div>
	<div class="footer" style="background-color: #4caf50;">
    <p>
        <a title="查看详情" style="cursor: pointer; color:white">项目名一         </a>
    </p>
</div>
</div>

<div class="card">
    <div class="body">
      <img src="https://c1.staticflickr.com/8/7591/16992834140_99815ee4ac_m.jpg" 				class="screen-shot">
   </div>
	<div class="footer" style="background-color: #4caf50;">
    <p>
        <a title="查看详情" style="cursor: pointer; color:white">项目名一         </a>
    </p>
</div>
</div>
<div class="card">
    <div class="body">
      <img src="https://www.w3schools.com/css/img_fjords.jpg" 				class="screen-shot">
   </div>
	<div class="footer" style="background-color: #4caf50;">
    <p>
        <a title="查看详情" style="cursor: pointer; color:white">项目名一         </a>
    </p>
</div>
</div>

<div class="card">
    <div class="body">
      <img src="https://c1.staticflickr.com/8/7591/16992834140_99815ee4ac_m.jpg" 				class="screen-shot">
   </div>
	<div class="footer" style="background-color: #4caf50;">
    <p>
        <a title="查看详情" style="cursor: pointer; color:white">项目名一         </a>
    </p>
</div>
</div>
<div class="card">
    <div class="body">
      <img src="https://www.w3schools.com/css/img_fjords.jpg" 				class="screen-shot">
   </div>
	<div class="footer" style="background-color: #4caf50;">
    <p>
        <a title="查看详情" style="cursor: pointer; color:white">项目名一         </a>
    </p>
</div>
</div><div class="card">
    <div class="body">
      <img src="https://www.w3schools.com/css/img_fjords.jpg" 				class="screen-shot">
   </div>
	<div class="footer" style="background-color: #4caf50;">
    <p>
        <a title="查看详情" style="cursor: pointer; color:white">项目名一         </a>
    </p>
</div>
</div>

</body>
</html>

＆＃13;

尝试设置卡的静态高度。问题不同的图像高度

Answer 2

问题是图像高度。某些图像的高度似乎比其他图像高一个，这将影响下一行的浮动图像。填充是有效的，因为图像按比例缩小（您在.card上设置了明确的宽度）并且由于缩放没有额外的像素高度。

您可以做一些事情来解决这个问题，例如在图像上设置height，或者使用@ctwheels建议的解决方案（可能是flexbox）。

css布局很奇怪

2 个答案: