css浮動2個兄弟姐妹在一個固定的寬度和一個兄弟姐妹包含橢圓推動兄弟

Question

它很難解釋這個問題我有，因爲有很多變量。

我有它使用javascipt的調整大小固定的包裝depenping在屏幕上relsolution網站，所以所有的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因爲沒有帶ough房間。我無法浮動.sideNav，並把240px的左邊距，因爲有時.sideNav不會在那裏，有沒有辦法解決這個問題，並找到一個平衡，使內容流動在他的頁面上很好...

我只是現在學習css 2個月，所以他們可能是一個解決方案，我不知道....我真的不知道或理解css很少，但也許在那裏的答案？

我可以，如果發佈完整的標記和CSS需要

只是想說提前感謝的人誰可以幫助！

Answer 1

您可以使用百分比爲您的項目，如.time{ width: 20%}。它們根據您的.contentContainer-Elements寬度調整大小，您可以將其設置爲width: 100%。注意你的填充和邊距，因爲它們在默認的瀏覽器框模式下加起來就是你的寬度。

Answer 2

如果您的列表中所有的圖像是相同的尺寸，與

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

設置它們，而不必每一個圖像上相同的樣式。

實際上，最好在img中設置width =「240」和height =「180」，以減少頁面加載時間，即「告訴」瀏覽器圖像的確切尺寸。