使用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在列布局中调整图像的大小

回答

相关问题