css浮動問題 - 清除：兩者的差距

我需要和左側的固定寬度（260px）的菜單div。然後用相對寬度（整個寬度 - 除了菜單DIV）內容的div那裏將是一個容器總是在內容DIV的中心（保證金：自動）css浮動問題 - 清除：兩者的差距

這是我的CSS

#site-content{ 
    margin:25px 0 0 260px; 
} 
.site-content{ 
    width:740px; 
    margin:auto; 
} 
#site-menu{ 
    float:left; 
    width: 260px; 
    padding: 20px 0; 
    overflow:hidden; 
}

似乎一切都OK ，但漂浮物存在問題。當我設置.site-content 2 divs（浮動）然後使用清除：既清除浮動，有很大的差距，菜單結束後其他元素下降。你能給我解決方案嗎？（抱歉不好英語）

HTML

<div id="site-menu"> 
     <ul> 
      <li class="menu"><a id="menu-glxavor" class="menu" href="/"></a></li> 
      <li class="menu"><a id="menu-mermasin" class="menu" href="/arm/about-us"></a></li> 
      <li class="menu"><a id="menu-usucich" class="menu" href="/arm/for-teachers"></a> 
      <ul id="menu-usucich-sub"> 
       <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/teacher-schedule">Դասացուցակ</a></li> 
       <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/homeroom-teachers">Դասղեկներ</a></li> 
       <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/exemplary-lessons">Օրինակելի դասեր</a></li> 
       <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/teacher-training">Վերապատրաստում</a></li> 
      </ul> 
      </li> 
      <li class="menu"><a id="menu-ashakert" class="menu" href="/arm/for-pupils"></a></li> 
      <li class="menu"><a id="menu-shrjanavartner" class="menu" href="/arm/graduates"></a></li>  
      <li class="menu"><a id="menu-norutyunner" class="menu" href="/arm/news"></a></li> 
      <li class="menu"><a id="menu-mankapartez" class="menu" href="/arm/kindergarten"></a></li> 
      <li class="menu"><a id="menu-nyuter" class="menu" href="/arm/materials"></a></li> 
      <li class="menu"><a id="menu-bajanortagrvel" class="menu" href=""></a></li> 
      <div id="subscribe"> 
        <input type="text" id="subscribe-name" placeholder="email" name="subscribe-name" /> 
        <button class="large awesome blue" id="sub-button" type="submit">բաժանորդագրվել</button> 
        <div id="sub-notification"></div> 
       </div> 
     </ul> 
     </div> 
     <div id="site-content"> 
     <div class="site-content"> 
      <div class="pages-content-top"></div> 
      <div class="pages-content-center"> 
      <h2>Համագործակցություն 1</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=37'>Ավելին...</a></span></div><div style='clear:both'></div> 


       <h2>Համագործակցություն 2</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=38'>Ավելին...</a></span></div><div style='clear:both'></div> 


       <h2>Համագործակցություն 3</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=39'>Ավելին...</a></span></div><div style='clear:both'></div> 
      </div> 
      <div class="pages-content-fot"></div> 
     </div> 
     </div>

來源

2013-07-23 Ninpo You

你能提供一個小提琴或一些HTML？ –

至少發佈HTML。爲什麼你需要清理浮球？ – Trojan

發佈了HTML代碼。 –

木馬是正確的... 我刪除浮動歡迎使用屬性並在CSS站點內容使用寬自既然你已經表示，它不是固定的.. 我不知道這是否爲u想要什麼，但看看這個小提琴 WORKING FIDDLE

CSS

h2{ 
margin:0; 
}

編輯：好的，我相信你的問題是在網站內容部分。第一個Para和第二個標題的結尾有很大的差距。至少這是我的理解，這就是你的代碼在this這樣的小提琴中運行時顯示的內容。

我剛剛從代碼中移除了一行。即行號46

<div style='clear:both'></div>

現在第一段和第二段之間沒有差距。理想情況下，您應該使用「明確：兩個」屬性，因爲您在右側有一個菜單。因此，如果您使用「明確：兩個」屬性，則div會自動向下對齊，因爲它會在右側找到菜單。希望你明白我的觀點。檢查這個example。在這裏你會看到兩個段落之間的差距是由於「明確：兩個」屬性。刪除它並且間隙消失。

FINAL Solution你的問題（我希望）。

來源

2013-07-23 18:00:16 AnaMaria

我覺得你貼錯了小提琴，差距似乎仍然存在。工作：http：// jsfiddle。淨/ Qhq2X/1/ –

坦率地說，它很難理解OP想要什麼 – AnaMaria

現在檢查這個答案...我希望這是你想要的 – AnaMaria

您應該製作.site-content建立new block formatting context，以便clear裏面隻影響其內部的浮動物，而不是其外部的浮動物。最合適的選項似乎是overflow: hidden和display: table（因爲寬度是固定的，並且由於display更改，佈局不會更改）。

來源

2013-07-23 18:19:14

css浮動問題 - 清除：兩者的差距

回答

相關問題