html - 删除图像下方的空白区域

Question

我们可以看到 link 中有很多空白区域如下图。我想隐藏那些空白区域。

.main {
    margin: 0 auto;
    width: 1000px;
}

body, button, input, select, table, textarea {
    font-family: 'Roboto Condensed', sans-serif;
    color: #636363;
    font-size: 14px;
    line-height: 1.5;
}

html

<div class="custom_case">
    <div class="custom_case_left">
        <h1 class="cc1">Custom Cases</h1>
        <h2 class="cc2">Make Your Own design</h2>
    </div>

<?php


$brandSelect = '<select id="brand_select">';
$brandSelect .= '<option value="">My Brand</option>';

$brandSelect .= '</select>';


echo '<select id="model_select"><option value="">My Model</option></select>';
?>


<div class ="cc3">
<div class ="cc4">
<a href= "><span class ="cc5"> See Cases > </span> </a>
</div>

</div>

我不想在图片和页脚下方留出太多空白

请帮助我。

提前致谢。

Answer 1

帮您解决了!

您的手机壳图片是导致空间问题的原因。

.custom_case_right img {
   /*float:right;*/
   /*bottom:320px;*/
}

这将修复图像下方的间距。现在您的图片显示不正确，要修复此问题

.custom_case_right {
    float:right;
    margin-top:-310px;
}

这两个更改应该可以为您解决。我在 Chrome 中对此进行了测试。

尽管视口(viewport)缩小，您仍然需要考虑如何让图像表现。