HTML\CSS 未使用的空格

Question

我正在做一个网站，侧面有很多未使用的白色space。我不知道要编辑哪个属性来摆脱它。如果我可以利用 space 我可以更好地移动我的元素。我 post 拍了一张照片来说明我的侧面有多少白色 space，以及当我摆脱 space 时我正在拍摄什么。如果我需要 post 我可以的任何代码。

wrapper 包裹整个 body

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 2.5%; /*First value is top/bottom, second is left/right*/
}

pair 是 class div 保存在

.pair {
    float: left;
    border:10px solid #002233;
    border-radius: 10%;
    overflow: auto;
    margin: 5% 0;
}

Answer 1

在大 <div> 上使用 float: left。

浮动前

.block {width: 30%; margin: 1% auto;}
.block img {max-width: 100%;}

<div class="block">
  <img src="http://placehold.it/350x150" />
</div>
<div class="block">
  <img src="http://placehold.it/350x150" />
</div>
<div class="block">
  <img src="http://placehold.it/350x150" />
</div>

浮动后

.block {width: 30%; float: left; margin: 1%;}
.block img {max-width: 100%;}

<div class="block">
  <img src="http://placehold.it/350x150" />
</div>
<div class="block">
  <img src="http://placehold.it/350x150" />
</div>
<div class="block">
  <img src="http://placehold.it/350x150" />
</div>

Answer 2

你的 'problem' 是你的包装器：

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 2.5%; /*First value is top/bottom, second is left/right*/
}

它将 max-width 设置为 940px 并将内容与 margin: 0 auto;

居中

尝试将 float: left;-idea 与以下代码结合使用：

#wrapper {
    max-width: 100%;
    margin: 0;
    padding: 0 2.5%; /*First value is top/bottom, second is left/right*/
}

Answer 3

如果您希望它根据屏幕宽度做出响应，那么我会使用 float 属性。

HTML

<div class="container">
    <div class="yourClass">
        <img src="#" alt="#" title="#" />
    </div>
    <div class="yourClass">
       <img src="#" alt="#" title="#" />
    </div>
    <div class="yourClass">
       <img src="#" alt="#" title="#" />
    </div>
</div>

CSS（您可以调整适合您网站设计的容器和 img 宽度）

.container { max-width: 960px; margin: 0 auto }
.container>* { padding: 10px }

.yourClass { float: left }
.yourClass img { width: 460px; height: auto } /* will resize your images according to the width you want the image be in your site, this will ensure consistency in your design */

HTML\CSS 未使用的空格

HTML\CSS Unused Whitespace

html

css

removing-whitespace