0

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

4

2 回答 2

2

将宽度应用于您的 columnWrapper：

.columnWrapper {
    float: left;
    width: 100%;
    min-height: 600px;
}
于 2013-03-20T02:12:44.453 回答
0

我也找到了与@3dgoo 给出的相同的解决方案。所以在这里也添加页脚解决方案。无论页面上的内容如何，​​您都必须做一些 CSS hack 以始终在底部对齐页脚。

看看这个CSS Stick 页脚

这绝对有效。我已经用过很多次了。确保你理解这里的逻辑。

于 2013-03-20T14:50:01.063 回答