2016-07-25 4 views
0

を他のdivを下に移動約100ピクセル下がります。なぜ私は絶対に考えていない。これは私のHTMLの大部分ですが、私のCSSのすべてではありません。あなたがもっと必要な場合は、私は提供することを嬉しく思います。フロート:右私は<code>float:right</code>しようとしている別のdiv(<code>.body</code>)の内側のdiv(<code>.contactquestion</code>)を持っていますが、私は<code>.contactquestion</code>に<code>float:right</code>を入れたときに、それは<code>.nav</code>クラス(写真の見出し)を移動

通常、floatプロパティはこれを行いますか?どんな助けもありがとう。

編集:ここにはすべてのフィドルがあります。あなたがそれを伸ばしなければ、中央領域はちょっと台無しになりますが、現時点ではそれほど重要ではありません。 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

clearを使用しましたか?両方ですか? –

+0

しました。 .contactquestion divの直後に置く。残念ながら何もしなかった。 –

答えて

1

私はJSfidleを経て、フローティングのdiv(.businessinquiry.contactquestion)の位置をリセットし、.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

あなたのCSSスタイルシートに ul{margin:0}を追加してみましたか?私はフロートとは何の関係もないと思う。

.bodyクラスにtop:100pxがある場合は、それも削除する必要があります。

あなたが提供したフィドルは本当にエラーを表示しませんbtw。

+0

トップを削除する:100pxは、見出しが現在座っているところまで移動します。 margin:0は何もしません。 :/ –

+0

フローティングボックスのマージンを取り除き、幅を使ってスペースを空けてください。 –

+0

また、効果はありません。これは非常に難解です。 –

0

オフmargin-top: 75pxを削除する.fixitクラスを追加する必要があります。実際にクラスの社会に対して、あなたはmargin-top:75pxを与えています。

.social {

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

とクラスを持つdiv要素は.businessinquiry。接触拒否、.socialはクラス.bodyとのdiv内にあります。しかし、あなたは浮動小数点を左右に提供してビジネスのお問い合わせをしています。接触不安。 .socialのための浮遊財産はありません。

問題を解決するには、次のことを行う必要があります。

  • 。ソーシャルアウトサイド.body divを配置して解決してください。
  • clear:両方のプロパティが浮動プロパティをキャンセルするために、 .contactquestion div。
  • あなたはmargin-top:75pxを与えました。これを削除する
関連する問題

 関連する問題