Question

我有两个主要的div service-display-box和service-contact。

service-contact在service-display-box之后未正确设置，div已在其中浮动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; }的中途开始。

我不确定我做错了什么。它适用于代码段，但不在我的页面上。

我做错了什么？

＆＃13;

<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>

＆＃13;

<ul class="progress-indicator">
  <li>
    //Others elements (variable)
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox"> // Exclude this one
  </li>
  <li>
    //Stuff here
  </li>
  <li>
    //Another stuff
  </li>
</ul>

＆＃13;

Answer 1

您没有正确清除浮动：扩展其中包含浮动元素的元素的最简单方法是添加overflow: hidden;。所以继续并给予

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

Answer 2

您设置clear: both的div也有display: none，这实际上使它无用。摆脱display: none移动按钮向下移动225px

Answer 3

你的问题出在这一行的jQuery中：

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

由于你的<div class="clear"></div> div的同意，你的display:none被设置为.service-item-box，

要解决这个问题，说div个.service-item-box个$('#service'+item_number).show().siblings('.service-item-box').hide();是唯一受影响的人，所以会像这样：

{{1}}

Answer 4

希望我理解这个问题。

将{ float:left;width:100%}添加到.service-contact，边距将正确计算

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

在浮动的div之后，Div不会对保证金作出反应

4 个答案: