有没有办法让CSS确定和调整图像宽度？

时间：2010-02-28 15:56:12

标签： css html

感谢Erik's help关于我的上一个问题，我能够让我的图标左侧，文本右侧浮动div示例正常工作：

http://tanguay.info/web/examples/tablelessItemLayout

alt text http://tanguay.info/web/customImages/itemTypes/codeExamples/tablelessItemLayout.png

然而，由于图像是各种宽度的，我不得不通过在某些标签中添加内嵌样式来作弊。

如何更改此代码，以便：

  • 没有内嵌样式
  • 支持各种尺寸的图片宽度

代码：

<html>

  <style>

    * { margin: 0; padding: 0 }

    body {
      padding: 20px;
      text-align: center;
      background-color: #333;
    } 

    p {
      margin: 0 0 10px 0;
    }

    #content {
      width: 600px;
      margin-left: auto;
      margin-right: auto;
      background: brown;
      border: 1px solid #555;
      text-align: left;
    }

    .item {
      margin: 20px;
      background-image:url('paperBackground.jpg');
      padding: 20px;
    }

    .itemIcon {
      float:left;         
    }

    .itemIcon p {
      font-size: 8pt;
      margin: 5px 0 0 0;
    }

    .itemBody h1 {
      font-size: 18pt;
      color: brown;
      margin: 0 0 10px 0;
    }

    .clear {
      clear: both;
    }

  </style>

<body>

<div id="content">

  <div class="item">   
    <div class="itemIcon" style="width: 70px; padding-left: -80px">
      <img src="icon.png" alt=""/> 
      <p>This is the caption that is under the image.</p> 
    </div>
    <div class="itemBody" style="margin-left: 80px">    
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
  </div>

  <div class="item">  
    <div class="itemIcon" style="width: 160px; padding-left: -170px">
      <img src="bigIcon.png" alt=""/> 
      <p>This is the caption that is under the image and it is a very long text so it is going to wrap a couple times here in the left column under the image.</p>  
    </div>
    <div class="itemBody" style="margin-left: 170px">  
      <h1>This is the second item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div>    
  </div> 

</div>

</body>
</html>

6 个答案:

答案 0 :(得分：1)

如果您将overflow: auto添加到.itemBody，则可以删除这些自定义内联边距和填充：

.itemIcon {
    float: left;
    margin-right: 10px;
}
.itemBody {
    overflow: auto;
}

但是，你不能像这样摆脱.itemIcon上的内联宽度，因为CSS无法将<p>的宽度限制为宽度。在它之前的图像。如果你只有一个图像，但没有文字，那么你就不需要宽度。

你可以完全摆脱内联样式，但是，如果你使用CSS表：

.itemIcon {
    display: table-cell;
    padding-right: 10px;
}
.itemBody {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}

width: 100%上的itemBody强制itemIcon的宽度降至其最小宽度，该宽度由图像的宽度决定。 vertical-align: top会阻止itemBody的第一行与itemIcon“表格列中的图片/文字对齐。”

答案 1 :(得分：0)

您问题的最佳解决方案可能是使用JavaScript动态修改CSS。 JQuery's .width()允许您执行诸如获取图像宽度之类的操作，并且.css()可用于修改元素的CSS（包括宽度，边距和填充）。我的建议是为每个itemIcon和itemBody添加一个ID，然后使用onload() event来正确设置div的样式。

答案 2 :(得分：0)

我希望有人能给你一个基于div / css的解决方案。但是为了处理不同的图像宽度，我认为你需要以下四种方法中的一种：

  • 手动创建的内联样式（如您所见）
  • 在服务器端代码中创建的内联样式
  • 使用javascript调整的文本块的宽度
  • 每个图像和文本块的单行表

也许这只是我想象中的失败，但我没有看到这种布局可以在不设置特定段落宽度的情况下完成，或者为每个块使用单行表。

答案 3 :(得分：0)

就我所知，CSS并不提供条件运算符或基于逻辑的运算的任何方法。这意味着您的选择受限于：

  1. 服务器端图像调整
  2. 客户端图片 - 或风格 - 调整
  3. 使用css为图像应用一致的宽度

    4. 在所有这些中，我将讨论第三点，它提供了几个选项。

    首先是使用：

    img {width: 100px; /* or whatever */ }

    第二种仅限于使用absolute个定位图像：

    img {clip: rect(0 100 100 0); } /* which will take the original image and clip it to the specified dimensions (top, right, bottom, left) */

答案 4 :(得分：0)

内联风格的东西很容易处理。将类添加到.item，例如.big，然后使用HTML，例如

<div class="item big">

和风格

.item.big .itemIcon { width: 160px; padding-left: -170px; }
.item.big .itemBody { margin-left: 170px; }

单独使用CSS无法动态更改数字。您可以使用javascript或服务器端函数来插入类名等。如果您自动生成图像，则可以同时处理此图像。如果您是手动完成，只需添加一次类就可以轻松实现。

答案 5 :(得分：-1)

OMG大家都忘了桌子:)。我觉得桌子很适合这种问题。

<div class="item"> 
    <table>
    <tr>
    <td class="image">
    <div class="itemIcon" >
      <img src="icon.png" alt=""/> 
      <p>This is the caption that is under the image.</p>  
    </div>
    </td>
    <td>
    <div class="itemBody" >    
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    </td>
    </tr>
    </table>
  </div>

td.image {
     vertical-align:top;
    }
相关问题
最新问题