Как сделать слой PUSH ниже?

im в центре создания сайта, и я столкнулся с этой структурной проблемой, и я думаю, им понадобится небольшая помощь здесь.Как сделать слой PUSH ниже?

основная структура такова:

<html> 
<head> 
<body> 
<p class="skip"> 
<div class="container fixed_header "> 
<div class="fluid_container"> 
<div class="body main"> 

</body> 
</html>

вы можете проверить свой веб-сайт для получения дополнительной информации, если вам нужна точная структура моего сайта: http://xestudio.xco.kr/ (это безопасно от вредоносных программ, если ваши расширения Adblock блокирует вас от входа)

Теперь контейнер является основным навигационным div, и жидкостью_контейнер является слайдером изображения. основной телом, конечно, тело.

Я создал эту функцию, чтобы, щелкнув по кнопке переключения, , он переключает слайдер изображения, чтобы открыть и закрыть. (если вы нажмете на кнопку cog в левой части моего веб-сайта, вы увидите тумблер)

то, что я пытался сделать из этого изначально, заключается в том, что когда я нажимаю на кнопку переключения, она должна полностью скрывать слайдер изображения и подтолкнуть содержимое вверх таким образом, чтобы главная ячейка заменила место слайдера.

Но, как вы можете видеть, все, что я вижу, - это пробел, который находился под слайдером изображения.

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

В любом случае я могу сделать слайдер в документе, чтобы ползунок изображения фактически «подталкивал» основной.

и же идет в строку меню (.container)

и здесь является CSS кодой.

.fluid_container { 
margin: 0 auto; 
width: 100%; 
height: 400px; 
transition: all 200ms ease-in-out; 
} 

.fluid_container.hide { 
height: 0; 
} 


.body{background-color: #fff; 
position:relative; 
padding:30px 0}

И функция тумблер -

<div class="switch"> 
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round"  type="checkbox" checked> 
    <label for="cmn-toggle-1"></label> 
</div> 


    <script> 
    jQuery(document).ready(function(){ 
jQuery('.cmn-toggle').on('click',function(){ 
jQuery('.fluid_container').toggleClass('hide',200); 

});});

Спасибо.

источник

2015-11-21 Mark

Почему 'высота' установлена равной нулю? 'display: none', а' display: block' достаточно, чтобы скрыть и показать –

Это потому, что он заикается и довольно визуально возится. – Mark

Попробуйте использовать этот CSS ...

.fluid_container { 
margin: 0 auto; 
width: 100%; 
height: 400px; 
transition: all 200ms ease-in-out; 
} 

.hide { 
display: none; 
height: 0; 
}

Надеется, что это помогает.

источник

2015-11-21 10:29:54

спасибо за это, но я не должен использовать дисплей. и этот ответ на самом деле совершенно не соответствует теме. но оценили, как всегда. – Mark

ОК, поэтому я, возможно, не понял, чего вы хотите. :) Попробуйте 'visibility: hidden;' font-size: 0px; 'и т. Д. Другие варианты скрытого содержимого. –

Хорошо, так что основная идея заключается в том, что слайдер должен PUSH других элит. устанавливая его невидимым, оставляет пустое пространство, и это не то, что я хочу. но спасибо. – Mark

Как сделать слой PUSH ниже?

ответ

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