2

我正在执行以下操作以显示带有图像的新闻项目。它适用于 320 宽度的设备，但是我们可以为 240 设备做些什么，因为我将图像浮动到右侧，它会下降，使用 % 与 div （而不是表格）也是明智的

<div style="padding:10px;height: 100px;border-bottom: red 1px dashed">
  <div style="width: 56%; float: left; padding-right: 10px;">
     <span style="font-size: 14px; display: block; color: #cccccc">
        Pune, the team to beat
      </span> 
      <span style="font-size: 16px"> 
         Ruthless Gayle
      </span>
  </div>
  <div style="width: 40%; float: right">
    <img src="../images/src.jpg" width="120px" height="80px" />
  </div>
</div>

请让我们知道如何更好地做到这一点。我们是否应该减少小宽度设备的字体。而且，还有关于图像大小的问题。

4

5 回答 5

0

Try with padding right in % :

e.g. 

<div style="width: 56%; float: left; padding-right: 2%;">
于 2013-05-10T07:11:15.277 回答
0

对于字体大小，使用“em”而不是“px”-> 1em = 16px。

和正文-->字体大小：100%；

于 2013-05-10T06:43:43.967 回答
0

在为移动/智能手机设计时，明智的做法是使用 % 或 em 来设置大小、边距和填充。

<div style="padding:5%;height: 40%;border-bottom: red 1px dashed">
  <div style="width: 56%; float: left; padding-right: 5%;">
    <span style="font-size: 2em; display: block; color: #cccccc">
      Pune, the team to beat
    </span> 
    <span style="font-size: 2em"> 
      Ruthless Gayle
    </span>
</div>
<div style="width: 40%; float: right">
  <img src="../images/src.jpg" width="100%" height="100%" />
</div>

当然，我插入的值只是暂时的。只需测试和测试，直到获得正确的结果。我在 px 中留下了边框，但您也可以更改它。但这只是一个边界，所以我认为这没什么大不了的。

于 2013-05-10T07:35:58.127 回答
0

虽然这里有些人给了你一个答案，但他们没有解释发生了什么。基本上一切都涉及到数学。

如果您有一个240像素宽度的屏幕，当您计算它的96%（左侧56%和右侧40%）时，您将得到舍入231像素。这给我们留下了9 个备用像素。不幸的是，这还不够，因为在左边的项目上你有一个. 相同的填充将其自己的值添加到全宽总和。因此，要适应这种结构，您至少需要241像素。width padding-right: 10px;width

这就是为什么您还应该为您的padding.

<div style="padding:10px;height: 100px;border-bottom: red 1px dashed">
  <div style="width: 56%; float: left; padding-right: 4%;">
     <span style="font-size: 14px; display: block; color: #cccccc">
        Pune, the team to beat
      </span> 
      <span style="font-size: 16px"> 
         Ruthless Gayle
      </span>
  </div>
  <div style="width: 40%; float: right">
    <img src="../images/src.jpg" width="120px" height="80px" />
  </div>
</div>

您在这里拥有的是正确的测量值。56 %（左）+ 4 %（填充）+ 40 %（右）= 100 %；

关于您的评论之一的问题：

  1. 您在这里正确使用了 span ，不像div,span是内联元素，因此应该像这样使用它，或者在您的情况下作为标题或子标题的一部分。

  2. 表格已成为过去，表格只能用于显示表格数据，不应用于复杂的布局设计。这是一个很大的不。您最初的方式是正确的现代方式，您只需要处理数学，使用百分比时总是使用百分比，反之亦然。

  3. Pxvsem是一场古老的战争。好吧，这不是一场战争，因为在对用于桌面和移动设备的页面进行 Web 开发时应该使用 em。与 不同px，em将随屏幕尺寸和屏幕密度缩放。例如，px在现代移动设备上查看时显示的文本看起来很小，但em会按比例缩放，您无需缩放/取消缩放页面以获得更好的可读性。

  4. 图像应该始终有一个父容器，例如 div。然后它应该width设置为100 % 并height设置为auto。因此，它将在宽度上拉伸，而heightauto 将垂直拉伸它，以便其纵横比（宽度/高度）可以保持不变。

于 2013-05-28T13:57:58.713 回答
0

定义一个类似的 CSS

.text{
    text-overflow: ellipsis;
     font-size: 1em;
}
于 2013-05-10T07:05:14.727 回答