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

感谢Erik's help在我的最后一个问题，我能得到我的图标，左，文本向右浮动DIV例如工作：有没有办法让CSS确定和调整图像宽度？

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>

来源

2010-02-28 Edward Tanguay

为什么你不只是强制在CSS上的图像大小？ – voyager 2010-02-28 16:29:58

您的问题的最佳解决方案可能是使用JavaScript动态修改CSS。 JQuery's .width()允许你做这样的事情得到的图像的宽度，.css()可以用来修改元素（包括宽度，边缘和填充）的CSS。我的建议是一个ID添加到每个itemIcon和itemBody，然后用onload() event适当样式的div。

来源

2010-02-28 16:28:40 Guildencrantz

我希望有人可以给你一个基于DIV/CSS的解决方案。但为了应对变化的图像宽度，我认为你需要的这四两件事之一：

内嵌样式手动创建（因为你现在有）
内嵌样式在服务器端代码中创建
宽度文本块用JavaScript
的单行表调整为每个图像和文本块

也许这只是我的想象的失败，但我没有看到这个布局可以完成witho以某种方式设置特定段落宽度，或对每个块使用单行表格。

来源

2010-02-28 16:29:51 Ray

您可以删除这些自定义在线边距和补如果添加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%; 
}

在itemBody的width: 100%迫使itemIcon的宽度降低到最小宽度，这是由图像的宽度决定。 vertical-align: top将阻止itemBody的第一行排除itemIcon“表格列”中的图像/文本。

来源

2010-02-28 16:31:51 mercator

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

服务器端图像调整
客户端的图像 - 或风格 - 大，使用CSS应用一致的宽度来调整
图像

在所有这些，我将解决第三点，它提供了几个选项。

首先是使用：

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) */

来源

2010-02-28 16:34:50

-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; 
    }

来源

2010-02-28 17:08:46

内联风格的事情很容易处理。添加类.item像.big，与当时的HTML是，例如，

<div class="item big">

和风格是

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

没有办法动态改变单独使用CSS数字。您可以使用javascript或服务器端函数插入类名称等。如果您自动生成图像，则可以同时处理这些图像。如果你正在亲手操作，那么添加一个类会使得它更容易。

来源

2010-02-28 17:32:53

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

回答

相关问题