シンプルなHTML、一見

-1

HTML以下に動作していないフロートとの奇妙なアライメントは：（しかしJSfiddleは、HTMLとCSSの両方を持っていた）シンプルなHTML、一見

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="styles.css"> 
</head> 

<body> 

    <div class="top1"> 
     <div class="top1-left"> 
      Welcome, Guest 
      <a href="https://www.google.ca">Login</a> 
      <a href="https://www.google.ca">Sign up</a> 
     </div> 
     <div class="top1-right"> 
      Stay Updated 
      <a href="https://www.google.ca">Subscribe via RSS</a> 
      <a href="https://www.google.ca">Email Updates</a> 
     </div> 
    </div> 

    <div class="top2"> 
     <div class="top2-text"> 
      <span style="font-size:40px;">My Blog</span> 
      <span style="font-size:20px; margin-left: 40px;"> Description of My Blog</span> 
     </div> 
    </div> 

    <div class="top3"> 
     <div class="top3-text"> 
      <span style="font-size:20px; margin-right: 40px;">HOME</span> 
      <span style="font-size:20px; margin-right: 40px;">ABOUT</span> 
      <span style="font-size:20px; margin-right: 40px;">BLOG</span> 
      <span style="font-size:20px; margin-right: 40px;">CONTACT</span> 
     </div> 
    </div> 

</body> 

</html>

https://jsfiddle.net/fsf90593/

私の質問は、なぜ "TOP3" のテキストはありませんDIV他の部門と同じように左に浮いていますか？私はかなりそのdivのための同じCSSとhtmlコードを持っています。おそらく簡単な答えですが、私はHTML CSSの世界にはかなり新しいです、助けてください。

出典

2017-10-08 mcgillian

あなたは、すべてのdiv放置上60PXパディングを持っているので、それはあります。 – Ofisora

@VXpここで使用するテーブルオブジェクトはありません – Jesus

@Ofisoraどのようにして同じエフェクトを達成できますか？代わりにマージンに切り替えて同じ問題を実行しています – mcgillian

てみdiv.top3テキストにclear: both;を追加し

CSS：それは、TOP2テキスト後TOP3テキストをクリアし、それが下に表示されるようにできるようになります

div.top3-text { 
    float: left; 
    line-height: 70px; 
    padding-left: 60px; 
    clear: both; 
}

トップ2-テキスト

出典

2017-10-09 10:49:29 Krusader

試用：Ju STはと、そのクラスを「クリア」クラスを持つdiv要素を追加し、スタイル「クリア：両方」

div.top1{ 
 
    background-color: darkgreen; 
 
    height: 40px; 
 
} 
 
div.top1-left{ 
 
    float: left; 
 
    padding: 10px 0px 5px 60px; 
 
    color: white; 
 
} 
 
div.top1-right{ 
 
    float: right; 
 
    padding: 10px 30px 5px 0px; 
 
    color: white; 
 
} 
 

 
div.top2{ 
 
    background-color: #247424; 
 
    height: 150px; 
 
} 
 

 
div.top2-text{ 
 
    float: left; 
 
    color: white; 
 
    padding-left: 60px; 
 
    line-height: 150px; 
 
} 
 

 
div.top3{ 
 
    height: 70px; 
 
    background-color: #81EE81; 
 
} 
 
div.top3-text{ 
 
    float: left; 
 
    line-height: 70px; 
 
    padding-left: 60px; 
 
} 
 

 
a{ 
 
    color: #82B62E 
 
} 
 

 
.clear{ 
 
    clear: both; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="styles.css"> 
 
</head> 
 

 
<body> 
 

 
    <div class="top1"> 
 
     <div class="top1-left"> 
 
      Welcome, Guest 
 
      <a href="https://www.google.ca">Login</a> 
 
      <a href="https://www.google.ca">Sign up</a> 
 
     </div> 
 
     <div class="top1-right"> 
 
      Stay Updated 
 
      <a href="https://www.google.ca">Subscribe via RSS</a> 
 
      <a href="https://www.google.ca">Email Updates</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="top2"> 
 
     <div class="top2-text"> 
 
      <span style="font-size:40px;">My Blog</span> 
 
      <span style="font-size:20px; margin-left: 40px;"> Description of My Blog</span> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="clear"></div> 
 
    <div class="top3"> 
 
     <div class="top3-text"> 
 
      <span style="font-size:20px; margin-right: 40px;">HOME</span> 
 
      <span style="font-size:20px; margin-right: 40px;">ABOUT</span> 
 
      <span style="font-size:20px; margin-right: 40px;">BLOG</span> 
 
      <span style="font-size:20px; margin-right: 40px;">CONTACT</span> 
 
     </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-10-09 10:58:59 Jonjie

答えて

関連する問題