浮動兩個div元素沒有受到影響的下一個div元素

我想並排浮動兩個元素，但前面的div元素似乎是按照fiddle來到兩個元素之間。即我想找到左側最好的供應商，登錄/註冊在右側的同一行以及其下的所有其他內容。浮動兩個div元素沒有受到影響的下一個div元素

HTML：

<div id="home-dir-left"> 
<div class="custom-widget-head"> 
    <h3><span class="custom-section-head"> Find the Best Vendor</span></h3> 
    <a href="/login/" class="btn tools-login">Login/Register</a> 
</div> 

    <div class="homecat-columns"> 
    <div class="span2 directory-categories"> 
     <div class="custom-widget-head"> 
     <h4><span class="dircat-head"> Fashion</span></h4> 
     </div> 

     <span class="span-dircat"> 
     <ul> 
    <li><a href="/listings/category/bridal-accessories/">Bridal Accessories</a></li> 
     </ul> 
    </span> 

    </div> 
</div> 
</div>

來源

2014-03-07 user2798091

你應該.custom的小部件，head'元素的'清底浮動，如：HTTP ：//jsfiddle.net/hashem/pLBmz/1/說明** [這裏]（http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734）** –

謝謝..這工作 – user2798091

你想做的事就是這樣，請訪問鏈接：

http://jsfiddle.net/pLBmz/2/

 <div class="custom-widget-head"style="clear:both;"> 
      <h4><span class="dircat-head"> 
    Fashion</span></h4> 

     </div> <span class="span-dircat"> 

     <ul> 
      <li><a href="/listings/category/bridal-accessories/">Bridal Accessories</a> 


     </li></ul> 
    </span>

來源

2014-03-07 10:03:47 NDK

你要清楚你彩車使用類clearfix

.clearfix:after { 
    clear: both; 
    content: ' '; 
    display: block; 
    font-size: 0; 
    line-height: 0; 
    visibility: hidden; 
    width: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

* html .clearfix { 
    height: 1%; 
} 

.clearfix { 
    display: block; 
}

DEMO

來源

2014-03-07 10:10:20 Alex

-1

做出改變在跟隨着CSS類

.custom-section-head 
    { 
    margin: 20px 0px 0px 0px; 
    } 
.tools-login 
{ 
    margin: 30px 0px 0px 0px; 
    }

添加<br><br>前<ul>

來源

2014-03-07 10:11:23

浮動兩個div元素沒有受到影響的下一個div元素

回答

相關問題