поплавок: право перемещает другие дивы вниз

У меня есть DIV (.contactquestion) внутри другого DIV (.body), который пытается float:right, но когда я ставлю float:right на .contactquestion, он перемещает .nav класса (заголовок на картинке) около 100 пикселей. Я понятия не имею, почему. Это большая часть моего HTML, но не для всех моих CSS. Если вам нужно больше, я буду рад предоставить.поплавок: право перемещает другие дивы вниз

Обычно ли это свойство поплавка? Любая помощь будет оценена по достоинству.

РЕДАКТИРОВАТЬ: Вот скрипка со всем. центральная область будет немного перепутана, если вы не растянете ее, но на данный момент это не имеет большого значения. https://jsfiddle.net/BTJohnson/zo6132yL/

Вот картина проблемы:

.body{ 
 
     width: 60%; 
 
     top: 100px; 
 
     position: relative; 
 
     margin: 0 auto; 
 
     height: 100%; 
 
     background-color: #444; 
 
     color: white; 
 
    } 
 

 
    .businessinquiry { 
 
     float: left; 
 
     width: 45%; 
 
     border: 1px solid black; 
 
     margin-left: 25px; 
 
    } 
 

 
    .contactquestion { 
 
     width: 45%; 
 
     background-color: #444; 
 
     padding: 5px; 
 
     opacity: .9; 
 
     margin-bottom: 50px; 
 
     border: 1px solid black; 
 
     float: right; 
 
     margin-right: 25px; 
 
    }

\t <div class="nav"> 
 
\t \t <ul> 
 
\t \t \t <li class="home"><a href="BraxtonTJohnsonHome.html"><img src="../pics/Logo.png" width="50" height="50"></a></li> 
 
\t \t \t <li class="about"><a href="BraxtonTJohnsonAbout.html">About</a></li> 
 
\t \t \t <li class="mywork"><a href="BraxtonTJohnsonMyWork.html">My Work</a></li> 
 
\t \t \t <li class="contact"><a class="active" href="BraxtonTJohnsonContact.html">Contact</a></li> 
 
\t \t </ul> 
 
\t </div> 
 

 
\t <div class="body"> 
 
\t \t <div class="businessinquiry"> 
 
\t \t \t <h2>Business Inquiries</h2> 
 
\t \t \t <p>...</p> 
 
\t \t \t <p>...</p> 
 
\t \t </div> 
 
\t \t <div class="contactquestion"> 
 
\t \t \t <div class="words"> 
 
\t \t \t \t <h2>General Questions & Inquiries</h2> 
 

 
\t \t \t </div> 
 
\t \t \t <form method="post" action="../php/index.php"> 
 
     
 
    \t \t \t <input class="info" name="name" placeholder="What's your name?"> 
 
      
 
    \t \t \t <input class="info" name="email" type="email" placeholder="What's your email?"> 
 
      
 
    \t \t \t <textarea class="message" name="message" placeholder="How can I help?"></textarea> 
 
      
 
    \t \t \t <input class="info" id="submit" name="submit" type="submit" value="Submit"> 
 
     
 
\t \t \t </form> 
 
\t \t </div> 
 
\t \t \t <div class="social"> 
 

 
\t \t \t </div> 
 
\t </div>

источник

2016-07-25 B Johnson

Пожалуйста, предоставьте нам скрипку, чтобы мы могли увидеть проблему и помочь вам гораздо лучше. –

Вы использовали ясно: оба? –

я сделал. Поставьте это прямо после .contactquestion div. К сожалению, ничего не сделал. –

Нужно добавить .fixit класс, чтобы сбросить положение плавающих дивы (.businessinquiry, .contactquestion) и удалить margin-top: 75px от .social

.fixit:after{visibility:hidden;display:block;font-size:0;content:" ";clear:.req-a-quote input[type="submit"]both;height:0;} 
 
.fixit{display:inline-block;clear:both;} 
 
* html .fixit{height:1%;} 
 
.fixit{display:block;} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-image: url("../pics/nature.png"); 
 
    background-size: 150%; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
.nav { 
 
    opacity: .9; 
 
} 
 
    
 
.nav ul { 
 
    list-style: none; 
 
    background-color: #444; 
 
    float: left; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
} 
 
.nav li { 
 
    font-family: 'Lato', sans-serif; 
 
    line-height: 40px; 
 
    height: 40px; 
 
    border-bottom: 1px solid #888; 
 
    text-align: center; 
 
} 
 
    
 
.nav a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    display: block; 
 
    transition: .3s background-color; 
 
} 
 
    
 
.nav a:hover { 
 
    background-color: #005f5f; 
 
} 
 
    
 
.nav a.active { 
 
    background-color: #efefef; 
 
    color: #444; 
 
    cursor: default; 
 
} 
 

 
img { 
 
    vertical-align: bottom; 
 
} 
 
    
 
@media screen and (min-width: 600px) { 
 
    .nav li { 
 
    width: 120px; 
 
    border-bottom: none; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-size: 1.5em; 
 
    } 
 
    
 
    /* Option 1 - Display Inline */ 
 
    .nav li { 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    } 
 
} 
 

 
/* Centre the page */ 
 

 
.body{ 
 
    width: 60%; 
 
    top: 100px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    height: 100%; 
 
    background-color: #444; 
 
    color: white; 
 
} 
 

 
.businessinquiry { 
 
    float: left; 
 
    width: 45%; 
 
    border: 1px solid black; 
 
    margin-left: 25px; 
 
} 
 

 
.contactquestion { 
 
    width: 45%; 
 
    background-color: #444; 
 
    padding: 5px; 
 
    opacity: .9; 
 
    margin-bottom: 50px; 
 
    border: 1px solid black; 
 
    margin-right: 25px; 
 
    
 
    float: right; 
 
} 
 

 
/* Centre the form within the page */ 
 
form { 
 
    margin:0 auto; 
 
    text-align: center; 
 
} 
 

 
/* Style the text boxes */ 
 

 
input, textarea { 
 
    height:30px; 
 
    background:#444; 
 
    border:1px solid white; 
 
    padding:10px; 
 
    font-size:1.2em; 
 
    color:white; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
input:focus, textarea:focus { 
 
    border:1px solid white; 
 
    color: white; 
 
} 
 

 
#submit { 
 
    height: 50px; 
 
    cursor: pointer; 
 
    transition: .3s background-color; 
 
    width: 9em; 
 
    float: right; 
 
    margin-right: 72px; 
 
    margin-top: 6px; 
 
    margin-bottom: 22px; 
 
} 
 

 
#submit:hover { 
 
    background-color:#005f5f ; 
 
} 
 

 
.info[name="name"] { 
 
    width: 8em; 
 
    margin-right: 8px; 
 
    margin-top: 22px; 
 
} 
 

 
.info[name='email'] { 
 
    width: 8em; 
 
    margin-left: 8px; 
 
    margin-top: 22px; 
 
} 
 

 
.message { 
 
    width: 350px; 
 
    margin-top: 16px; 
 
    margin-bottom: 16px; 
 
    height: 100px; 
 
    font-size: 1em; 
 
} 
 

 
.words { 
 
    text-align: justify; 
 
    color: #efefef; 
 
    margin-left: 24px; 
 
    margin-right: 24px; 
 
} 
 

 
.social { 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
.social img { 
 
    margin: 75px; 
 
    opacity: .9; 
 
    size: 25px; 
 

 
}

\t <div class="nav"> 
 
\t \t <ul> 
 
\t \t \t <li class="home"><a href="BraxtonTJohnsonHome.html"><img src="../pics/Logo.png" width="50" height="50"></a></li> 
 
\t \t \t <li class="about"><a href="BraxtonTJohnsonAbout.html">About</a></li> 
 
\t \t \t <li class="mywork"><a href="BraxtonTJohnsonMyWork.html">My Work</a></li> 
 
\t \t \t <li class="contact"><a class="active" href="BraxtonTJohnsonContact.html">Contact</a></li> 
 
\t \t </ul> 
 
\t </div> 
 

 
\t <div class="body"> 
 
    <!-- .row start --> 
 
    <div class="row fixit"> 
 
    
 
\t \t <div class="businessinquiry"> 
 
\t \t \t <h2>Business Inquiries</h2> 
 
\t \t \t <p>Interested in working together? Fill out the simple form below with some more information about your project, and I'll be in touch.</p> 
 
\t \t \t <p>Don't be afraid to be honest with us about your timeline and your budget. We're upfront about our prices, and knowing beforehand how we can best help you will really help later on.</p> 
 
\t \t </div> 
 
\t \t <div class="contactquestion"> 
 
\t \t \t <div class="words"> 
 
\t \t \t \t <h2>General Questions & Inquiries</h2> 
 

 
\t \t \t </div> 
 
\t \t \t <form method="post" action="../php/index.php"> 
 
     
 
    \t \t \t <input class="info" name="name" placeholder="What's your name?"> 
 
      
 
    \t \t \t <input class="info" name="email" type="email" placeholder="What's your email?"> 
 
      
 
    \t \t \t <textarea class="message" name="message" placeholder="How can I help?"></textarea> 
 
      
 
    \t \t \t <input class="info" id="submit" name="submit" type="submit" value="Submit"> 
 
     
 
\t \t \t </form> 
 
    
 
\t \t </div> 
 
    </div><!-- .row end --> 
 
     
 
\t \t \t <div class="social"> 
 
\t \t \t \t <a class="facebook" href="https://www.facebook.com/bjohnson.rbi"><img src="../pics/facebook.png"></a> 
 
\t \t \t \t <a class="twitter" href="https://twitter.com/braxtontjohnson"><img src="../pics/twitter.png"></a> 
 
\t \t \t \t <a class="instagram" href="https://www.instagram.com/b_rax_johnson/"><img src="../pics/instagram.png"></a> 
 
\t \t \t \t <a class="youtube" href="https://www.youtube.com/user/RBIproductions"><img src="../pics/youtube.png"></a> 
 
\t \t \t </div> 
 
     
 
\t </div>

источник

2016-07-25 06:06:15 Kan412

Это исправлено! Спасибо. –

ли вы попробовать добавить ul{margin:0} к вашей таблицы стилей CSS? Я думаю, что это не имеет никакого отношения к float.

И у вас есть top:100px в .body классе, вы также должны удалить это.

Сценарий, который вы предоставили, действительно не показывает ошибок.

источник

2016-07-25 05:45:58

Снятие верха: 100px просто перемещает его туда, где сейчас находится заголовок. и margin: 0 тоже ничего не делает. :/ –

Попробуйте удалить поля на плавающих ящиках и сделать пробелы по ширине –

Также никакого эффекта. Это довольно загадка. –

Я прошел через JSfidle. На самом деле для класса .social вы предоставили margin-top: 75px.

.social {

padding: 20px; 
    text-align: center; 
    margin-top: 75px; 
}

И дивы с классами .businessinquiry. contactquestion, .social находятся внутри div с классом .body. Но вы даете float слева и справа на .businessinquiry. contactquestion. Для .social нет плавающего свойства.

Для решения проблемы вам необходимо выполнить следующие действия.

Место .социальная сторона .body div, чтобы решить эту проблему.
use clear: оба свойства для отмены плавающего имущества после .contactquestion div.
социальный, который вы предоставили margin-top: 75px. Убрать это

источник

2016-07-25 06:12:31 Anuradha

поплавок: право перемещает другие дивы вниз

ответ

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