使用css在列布局中調整圖像的大小

我正嘗試使用兩列布局創建網頁。它的一個方面是，圖像可以調整大小以佔據列寬的一半。我用一些CSS如下使用css在列布局中調整圖像的大小

.columnWrapper { 
    float: left; 
    width: auto; 
} 
.sidebar1 { 
    float: right; 
    width: 33%; 
    padding: 0 20px 0 10px; 
} 
.main { 
    float: left; 
    width: 66%; 
    padding: 0 20px; 
    border-left: none; 
    border-right: solid 1px rgb(153,153,153); 
} 

footer { 
    clear: both; 
} 
nav ul, header h1, footer p, .contentWrapper { 
    max-width: 1200px; 
    margin: 0 auto; 
} 
img { 
    max-width: 100%; 
} 
img.half { 
    max-width: 50%; 
} 
img.left { 
    float: left; 
    margin: 0 10px 10px 0; 
} 
img.right { 
    float: right; 
    margin: 0 0 10px 10px; 
}

當我嘗試使用的標記類似如下

<div class="contentWrapper"> 
<div class="columnWrapper"> 
<!-- main content goes here --> 
<article class="main"> 
    <img src="images/synergy2.jpg" alt="Synergy" class="half right"> 
    <h3>About us</h3> 
    <p>blah blah blah</p> 
</article> 
<!-- first sidebar goes here --> 
<aside class="sidebar1"> 
</aside> 
<!-- end column wrapper --> 
</div> 
<!-- end content wrapper --> 
</div>

它的工作原理如我所料在Chrome來調整在HTML中的圖像，但Firefox有一個問題，該圖像沒有調整大小。 CSS有問題還是瀏覽器問題？謝謝。

我想知道的另一件事，是否有一種簡單的方法來確保列具有最小高度。如果內容不多，頁腳就會變得太高而且看起來很奇怪。謝謝。

我提出了一個簡單的Web網頁與HTML/CSS問題 http://adjk3543.appspot.com/aboutus.html

來源

2013-03-20 Antonio2011a

應用的寬度到您columnWrapper：

.columnWrapper { 
    float: left; 
    width: 100%; 
    min-height: 600px; 
}

來源

2013-03-20 02:12:44 3dgoo

感謝您的解決方案。但爲什麼不寬：auto;在原來的CSS工作？ – Antonio2011a 2013-03-20 03:39:57

我相信這是用'浮動'需要一個設定的寬度。如果你從'columnWrapper'（連同'width'）中移除'float'，它也可以正常工作。這裏是關於這個主題的一些閱讀：http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ – 3dgoo 2013-03-20 03:50:00

我也發現了同樣的解決方案@ 3dgoo給。所以在這裏添加頁腳解決方案。無論頁面上的內容如何，您都必須執行一些CSS hack來將頁腳底部對齊。

檢查了這一點CSS Stick Footer

這絕對有效。我用過很多次。確保你瞭解這裏的邏輯。

來源

2013-03-20 14:50:01 sachinjain024

使用css在列布局中調整圖像的大小

回答

相關問題