有沒有辦法讓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確定和調整圖像寬度？

回答

相關問題