Question

我正在执行以下操作来显示带有图像的新闻项目。它适用于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>

请让我们知道如何做得更好。我们应该减少小宽度设备的字体。并且，关于图像尺寸也是如此。

Answer 1

对于font-size使用“em”而不是“px” - ＆gt; 1em = 16px。

和body - ＆gt; font-size：100％;

Answer 2

定义一个类似

的CSS

.text{
    text-overflow: ellipsis;
     font-size: 1em;
}

Answer 3

在％：

中尝试使用填充

e.g。

<div style="width: 56%; float: left; padding-right: 2%;">

Answer 4

在设计移动/智能手机时，明智的做法是使用％或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中离开了边框，但你也可以改变它。但它只是一个边界，所以我认为这不是什么大问题。

Answer 5

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

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

这就是为什么你还应该为 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 ％; < / p>

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

您在此处正确使用了span，与 div 不同， span 是内联元素，因此应该像这样使用，或者在您的情况下作为标题或子标题的一部分。
表格已成为过去，表格仅应用于显示表格数据，不应用于复杂的布局设计。这是一个很大的不，不。你原来的方式是正确的现代方式，你只需要处理数学，当使用百分比时总是使用百分比，反之亦然。
Px vs em 是一场古老的战争。好吧，这不是一场战争，因为在用于桌面和移动设备的网页开发时应该使用em。与 px 不同， em 会随屏幕尺寸和屏幕密度而变化。例如，在现代移动设备上查看时， px 中显示的文字看起来很小，但 em 会缩放尺寸而您不需要缩放/取消缩放您的页面以提高可读性。
图片应始终具有父容器，例如div。然后， width 设置为 100 ％， height 设置为自动。因此，它将在宽度上拉伸， height 自动将垂直拉伸，以使其纵横比（宽度/高度）保持不变。

支持更小的设备宽度

5 个答案: