Div не реагирует на маржу после плавающего div

У меня есть два основных divs service-display-box и service-contact.Div не реагирует на маржу после плавающего div

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

<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

Никогда не говорил, что это так. Я сказал, что это самый простой, и в этом случае он отлично работает. –

* Самый простой способ расширить элемент с плавающими элементами внутри него - добавить переполнение: hidden; * вы сказали – 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

ответ

Смежные вопросы