2016-07-25 102 views
0

我有一個div(.contactquestion)另一個div中(.body)正試圖float:right,但是當我把float:right.contactquestion,它(在圖片標題)移動.nav類下降約100px。我完全不知道爲什麼。這是我的大部分HTML,但不是我所有的CSS。如果您需要更多,我會很樂意提供。浮動:向右移動其他的div下來

浮動屬性通常做到這一點嗎?任何幫助,將不勝感激。

編輯:這裏是一切的小提琴。除非你舒展,否則中心區域會有點混亂,但目前這並不重要。 https://jsfiddle.net/BTJohnson/zo6132yL/

這裏的問題的一個畫面:

enter image description here

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

 

+0

請給我們提供一個小提示,以便我們看到問題並以更好的方式爲您提供幫助。 –

+0

你有沒有使用清楚:兩者? –

+0

我做到了。把它放在.contactquestion div後面。不幸的是沒有做任何事情。 –

回答

1

需要添加.fixit類重置(.contactquestion.businessinquiry)浮動的div的位置,並移除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>

+0

修好了!謝謝。 –

0

你嘗試加入 ul{margin:0}你的CSS樣式表?我認爲這與浮動無關。

而你在.body類中有top:100px,你也應該刪除它。

你提供的小提琴不真正顯示任何錯誤順便說一句。

+0

刪除頂部:100px只是將其移動到標題所在的位置。和保證金:0也沒有做任何事情。 :/ –

+0

嘗試刪除浮動框的邊距,並通過寬度 –

+0

執行空格也沒有效果。這是相當難題。 –

0

我通過JSfidle了。其實對於.social類,你已經給出了margin-top:75px。

。社會{

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

而且隨着等級的div .businessinquiry。 contactquestion,.social在class和body裏面。但是你已經向商業調查提供了左右兩邊的權利。 contactquestion。 .social沒有浮動屬性。

要解決此問題,您需要執行以下操作。

  • 將.social放在一邊。體格解決它。
  • 使用clear:兩個屬性取消 .contactquestion div後的浮動屬性。
  • 您已經給予margin-top:75px的社交。刪除該信息