css - 使用CSS调整列布局中的图像大小

Question

我正在尝试创建一个具有两列布局的网页。它的一个方面是图像可以调整大小以占据列宽的一半。我使用了一些 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;
}   

当我尝试使用如下标记调整 html 中的图像大小时

<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 上按我预期的方式工作，但 Firefox 有一个问题，因为图像没有调整大小。 CSS 有问题还是浏览器问题？谢谢。

我想知道的另一件事是，是否有一种简单的方法可以确保列具有最小高度。如果内容不多，页脚就会变得太高，看起来很奇怪。谢谢。

我用相关的 html/css 制作了一个示例网页 http://adjk3543.appspot.com/aboutus.html

Answer 1

为您的 columnWrapper 应用宽度:

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