Question

我试图并排浮动两个元素，但前面的div元素似乎按照fiddle介于两者之间。即我想在左边找到最好的供应商，在右边的同一行登录/注册，在其下面的所有其他内容。

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>

Answer 1

你想这样做，请访问链接：

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>

Answer 2

你必须使用类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

Answer 3

在followin css class中进行更改

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

在<br><br>

之前添加<ul>

浮动两个div元素而不会影响下一个div元素

3 个答案: