浮动两个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元素

回答

相关问题