0

可変幅の左 div と固定幅の右 div があります。jrox サイトのテーマを設定していて、jrox では列が生成される順序を変更できないため、この作業を行う方法を理解するのにしばらく時間がかかりました。HTML:

<div id="jroxHeader" class="jroxHeader"> </div>
<div id="jroxContent">
    <div id="jroxRightColumn" class="jroxRightColumn"> Places to go:
      <ul>
        <li>First Menu</li>
        <li>Second Menu</li>
        <li>Third Menu</li>
      </ul>
    </div>
    <div id="jroxMainContent" class="jroxSingleColumn">  
        Very little content.
    </div>
</div>

CSS:

.jroxSingleColumn{
  float: left;
  margin-right: 160px;
  padding:0 10px;
  background-color:#B6B6B4;
}
.jroxRightColumn{
  float: right;
  width: 160px; 
  margin-left: -160px; 
  background-color:#8E8E8C;
}
.jroxHeader{
   width: 100%;
   background-color:#7A7A78;
   height:150px;
}

このフィドルでわかるように、これは見栄えがします。ほぼ完璧に機能します。この fiddleのように jroxSingleColumn のコンテンツが非常に少ないページに遭遇するまで、私は気付かず、発行しませんでした。div の残りの部分を埋めるために jroxSingleColumn が必要であり、ブラウザ間で互換性がある必要があります。HTML の一部を変更できますが、右側の列は常に最初に HTML になります。

私はこれが重複していないことをほぼ確信しています。私は多くの同様の問題を読みましたが、どれも同じではありません。

ありがとう。

4

1 に答える 1

1

クラスからを削除float:leftします。jroxSingleColumn

css を次のように変更します。

.jroxSingleColumn{
  margin-right: 160px;
  padding:0 10px;
  background-color:#B6B6B4;
}

このフィドルを参照してください

提案したいのですが、最終結果を達成するためのよりクリーンな方法があります。

于 2013-07-25T21:27:56.690 に答える