Div浮動後不會對餘量div

我有兩個主要div service-display-box和service-contact。Div浮動後不會對餘量div

service-contact在service-display-box之後沒有正確設置，它已經在其中浮動了div s。

讓我先說明我在使用clear: both;後浮動div。另外，service-contact正在讀取margin，但它正在開始到service-display-box的一半。

我不知道我在做什麼錯。它在代碼段中工作，但不在我的頁面上。

我在做什麼錯？

#service-display-box { 
 
    background: #FFF; 
 
    color: #000; 
 
    width: 100%; 
 
    padding: 15px 0; 
 
} 
 
#service-display-box-container { 
 
    padding: 135px 15%; 
 
} 
 
.service-item-box-img-container { 
 
    width: 80%; 
 
    margin: 50px 10%; 
 
} 
 
.service-item-box-img { 
 
    margin: 50px 0; 
 
    width: 40%; 
 
    height: auto; 
 
    vertical-align: top; 
 
    box-shadow: 8px 8px 4px #BEBEBE; 
 
} 
 
.service-item-box-img.left { 
 
    float: left; 
 
} 
 
.service-item-box-img.right { 
 
    float: right; 
 
} 
 
#service-contact { 
 
    margin: 225px auto 75px auto; 
 
    text-align: center; 
 
    clear: both; 
 
} 
 
#service-contact a { 
 
    text-decoration: none; 
 
} 
 
#service-contact-button { 
 
    border: 1px solid #578570; 
 
    background: #578570; 
 
    color: #FFF; 
 
    padding: 20px 40px; 
 
    font-size: 1.5em; 
 
    transition: 0.4s ease; 
 
    -webkit-transition: 0.4s ease; 
 
}

<div id="service-display-box"> 
 
    <div id="service-display-box-container"> 
 
    <div class="service-item-box" id="service1"> 
 
     <h1 class="service-item-title">DEMOLITION</h1> 
 
     <h2 class="service-item-description"> 
 
       <p>We continues to build a strong legacy in the dismantlement industry because of our proven ability to complete projects ranging in nearly any size」</p> 
 
       <p>We have played a valuable role in the demolition of numerous industrial facilities throughout the region including chemical, steel mills, energy generation, tire, and automotive. These structures demand skillful understanding along with proper tools and equipment to be safely brought down.</p> 
 
       <p>Commercial demolition is essential in the redevelopment process. The region has allowed us to complete numerous commercial projects. We are able to perform interior, selective, and full demolition services to our clients.</p> 
 
       <p>Residential demolition is a fundamental ability. We provides turnkey services to the public, the government, and development entities.</p> 
 
      </h2> 
 
     <div class="service-item-box-img-container"> 
 
     <img src="images/service/demo/demo1.jpg" alt="Eslich Wrecking Company Demolition and Wrecking Services" class="service-item-box-img left"> 
 
     <img src="images/service/demo/demo2.jpg" alt="Eslich Wrecking Company Demolition and Wrecking Services" class="service-item-box-img right"> 
 
     </div> 
 
    </div> 
 
    <div style="clear:both;"></div> 
 
    <div id="service-contact"><a href="contact"><span id="service-contact-button">CONTACT US</span></a> 
 
    </div>

來源

2016-06-23 Becky

不知道什麼輸出你正試圖在這裏實現，但只是我 – dippas

我只是想讓按鈕更低....就是這樣。我希望它清除浮動，然後能夠像正常一樣定位。 – Becky

但你的「拆除」部分的佈局現在有點亂，不清楚將會有什麼樣的佈局，我看到那些225px，畢竟 – dippas

你的問題是在jQuery的在這條線：

$('#service'+item_number).show().siblings().hide();

哪個讓你<div class="clear"></div>到被稱爲display:none，因爲是你的.service-item-box divs的同胞，

要解決這個問題是說，div s的.service-item-box類是受到影響的只有一個，所以會是這樣：

$('#service'+item_number).show().siblings('.service-item-box').hide();

來源

2016-06-23 16:20:17 dippas

感謝您的幫助！ – Becky

再次感謝所有的幫助，我真的很感激it1 – Becky

你沒有正確清除浮動：最簡單的方法在他的體內是增加overflow: hidden;擴大與浮動元素的元素。因此，繼續前進，給

.service-item-box-img-container { 
    overflow: hidden; 
}

來源

2016-06-23 14:50:39

溢出隱藏它不是清除浮游物的最佳方式 – dippas

永遠不要說它是。我說這是最簡單的，在這種情況下，它是完美的。 –

*最簡單的方法來擴展他內部的浮動元素的元素是添加溢出：隱藏; *你說 – dippas

你的div被設置clear: both也有display: none基本上使得它沒用。擺脫display: none將按鈕向下移動225px對我來說

來源

2016-06-23 14:52:18

我沒有看到我設置爲無顯示的位置？ – Becky

-1

希望我明白了這個問題。

添加{ float:left;width:100%}到.service-contact和保證金將被正確計算

還添加{ float:left;width:100%}到.service-top

來源

2016-06-23 14:55:55

Div浮動後不會對餘量div

回答

相關問題