使用CSS使div内容看起来更小

Question

我想让<div class="features">的内容变小，以便它看起来像这样：   查看此演示版here，看看到目前为止我能够实现的目标。正如您在图片中看到的那样，功能图标（没有每日限制等等）很小，而且它们下面的文字居中但是我没有＆到目前为止已经能够做到这一点。

Answer 1

在CSS中为宽度提供一些宽度。

<pre>
.features {  width: 800px; }
</pre>

你可以使用媒体查询。（如果设备尺寸小于你上面提到的，那么你给定宽度的尺寸会是什么，所有的东西都在这里......如下图所示。 ）

<pre>
@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
// font-size , margin , padding etc goes here ...

    }
}
</pre>

Answer 2

在班级width中停用.feature。目前，它设置为400px。完成后，你应该有这样的东西

Answer 3

我想，不是在评论中来回反复，我只是写一个答案。

需要考虑的几件事情：

1. 您的图片和文字位于不同的区域。对于图像，您可以使用宽度/高度而非字体大小调整其大小。如果要调整字体大小，请调整字幕的类别。

   .features img {
     float: left;
     padding-left: 50px;
     width: 100px; /*add some sort of width/height and that will resize*/
   }
   

2. 您的图片和文字位于表格的不同行中，因此将其作为一个单元进行调整将非常困难。

   <tr>
     <td>
       <img src=""/>
       <p>text</p>
     </td>
   </tr>
   

可能是一个更好的设置，但说实话，将所有表格放在一起并转移到列表会更加语义化。

<ul class="features">
  <li>
     <img src=""/>
     <span>image caption</span>
  </li>
</ul>

如果你真的想要语义结账http://html5doctor.com/the-figure-figcaption-elements/，但长话短说，你只需要点击宽度/高度的图像来调整大小。