0

変数がたくさんあるので、私が持っているこの問題を説明するのは非常に難しいです。

javascipt を使用して画面解像度に応じて固定ラップのサイズを変更するサイトがあるため、すべての div を 3 つの異なる幅にサイズ変更する必要があります。これが、この問題を非常に困難にしている理由です。

HTML

<div id="wrap" >
  <div id="content">
    <div class="sideNav" >/* This is not static in the markup so when its not in the markup the rest of the content will take its space as everything is 240px in width*/
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </div>
    <div class="contentContainer">/* this needs to resize to  */
      <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>
        <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>
      <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>
      <div class="item">
        <a href="">
          <img src="" alt="" style="width: 240px; height: 180px;"/>
          <div class="title"><p>help</p></div>
        </a>    
      </div>    
    </div>
  </div>
</div>

CSS

.wrap {
  width: 960px; or width: 1110px; or width: 1350px depending on screen res; /* all sizes which would fix 240px 4,5 or 6 times across*/
}
.sideNav {
width: 240px;
float: left;
}
contentContainer {
float: left;
}
.item {
width: 240px;
width: 180px;
}

明らかに、アイテムが 3 つを超えると、十分なスペースがないため、.contentContainer が .sideNav の下にプッシュされます。.sideNav をフロートさせて 240px の左マージンを設定することはできません。これは、.sideNav が存在しない場合があるためです。これを修正して平衡を見つけて、コンテンツがページ上でうまく流れるようにする方法はありますか...

私はCSSを2か月しか学んでいないので、おそらく解決策を認識していない....私はCSS LESSを本当に知らないか理解していませんが、おそらくそこに答えがありますか?

必要に応じて、完全なマークアップと CSS を投稿できます

助けてくれる人に前もって感謝したいだけです！

4

2 に答える 2

1

のように、アイテムにパーセンテージを使用できます.time{ width: 20%}。に設定できる .contentContainer-Elements の幅に応じてサイズが変更されますwidth: 100%。パディングとマージンに注意してください。これは、デフォルトのブラウザ ボックス モードで幅に加算されるためです。

于 2012-05-29T12:22:50.877 に答える
0

リスト内のすべての画像が同じ寸法である場合は、それらを次のように設定します

.item img { width: 240px; height: 180px; }

すべての画像に同じスタイルを適用する代わりに。

実際には、img で width="240" と height="180" を設定して、ページの読み込み時間を短縮すること、つまり、画像の正確なサイズをブラウザに「伝える」ことをお勧めします。

于 2012-05-29T12:27:25.450 に答える