変数がたくさんあるので、私が持っているこの問題を説明するのは非常に難しいです。
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 を投稿できます
助けてくれる人に前もって感謝したいだけです!