0

2 列のレイアウトで Web ページを作成しようとしています。その1つの側面は、列幅の半分を占めるように画像のサイズを変更できることです。私は次のようにいくつかの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 に問題がありますか、それともブラウザの問題ですか? ありがとう。

私が疑問に思っていたもう1つのことは、列の高さが最小であることを確認する簡単な方法があることです。コンテンツが少ない場合、フッターが高すぎて奇妙に見えます。ありがとう。

問題の html / css を含むサンプル Web ページを作成しました 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ハックを実行する必要があります。

これをチェックしてくださいCSSスティックフッター

これは間違いなく機能します。私は何度も使用しました。ここでロジックを理解していることを確認してください。

于 2013-03-20T14:50:01.063 に答える