ウェブページのレイアウト

私はページを作成していますが、レイアウトに関するいくつかの問題を抱えていますが、divのサイズ（実際には高さ）を自動的に調整することはできません。その下に表示されなくなりますウェブページのレイアウト

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
     <title>Link one</title> 

     <style type="text/css"> 
      div#middle{ 
       margin-top: 5px; 
       margin-bottom: 5px; 
      } 
     </style> 
    </head> 

    <body> 
     <div style="background-color: gray;border: solid 1px red" id="top"> 
      <h1>Top<h1> 
     </div> 

     <div style="border: solid 1px blue;min-height: 200px" id="middle"> 
      <div id="leftmenu" style="float: left;background-color:gray;width: 190px"> 
       <ul> 
        <li><a href=''>Link One</a></li> 
        <li><a href=''>Link Two</a></li> 
       <ul> 
      </div> 

      <div id="content" style="background-color: black;margin-left: 200px"> 
       I am in Link One 
      </div> 
     </div> 

     <div style="background-color: gray" id="foot"> 
      <hr/> 
      <p>Copyright xxx</p> 
     </div> 
    </body> 
</html>

注IDである「中」、私は手動でその高さを設定する必要がdiv要素、そうでない場合は、それ（ID「足」とのdiv）以下のdiv：次のマークアップを参照してください。足のdivは "middle" divと同じ行になります。テストのために "middle" divの "min-height：200px"を削除します。

コンテンツが不明なので手動でサイズを設定できないので、中央のdivの高さを「leftmenu」または「content」のより大きい高さにします。

アイデア？

----------------------------------------- alt text

拡大しません。

出典

2011-01-07 hguser

実験的な理由からだと思いますが、インラインCSSを削除して別のファイルに置きます。 – markus

あなたのフロートをクリアされていません。 <div style="clear:both;"></div>それが原因でページの流れのこれを行い、ID =コンテンツ

<div style="border: solid 1px blue;min-height: 200px" id="middle"> 
      <div id="leftmenu" style="float: left;background-color:gray;width: 190px"> 
       <ul> 
        <li><a href=''>Link One</a></li> 
        <li><a href=''>Link Two</a></li> 
       <ul> 
      </div> 

      <div id="content" style="background-color: black;margin-left: 200px"> 
       I am in Link One 
      </div> 
      <div style="clear:both;"></div> 
     </div>

とdivの下に次の行を追加します。フローは、ページ上の要素の順序です。したがって、あなたの例では、あなたのli要素が順番に配置されるので、最初の要素はページの2番目の要素の前に表示されます。同じことがすべての要素、<a>, <div>, <p>, <img>に適用され、テキストも同様です。要素がフローティングされると、フローから取り出され、それに続く要素がその隣にプッシュアップされます。このようにして、画像の周りを流れるテキストや、隣り合ったリンクを持つことができます。あなたが親要素（#middle）（あなたは#leftmenuと#contentで行ったように）別の要素内のすべての要素をフロート作用した場合、それはそれがあったかのように機能する流れには子要素を持っていないし、ため

は、残念ながら、それは何も含まれていないかのように本質的に空である。クリアを追加することで、他のすべての下のフローに子要素を作成しています。親要素は正しい高さを計算できます。

私はそれを十分に説明したかったと思います。

出典

2011-01-07 14:02:30

良い！それは今働く。詳細を教えていただけますか？なぜ私は知りたいのですか？ – hguser

私は自分の答えを編集して説明しようとしました –

はい、今すぐenougthをクリアしてください。それで、浮動小数点のスタイルが要素をその親elemetnでも飛ばすことを意味しますか？私はこれのようにthougth前から：私は "leftmenu" divをフロートしますが、それはdiv "middle"にまだ含まれていて、 "middle" divは浮動しません、それはまだページの通常の流れの中にあります"foot" divとして、3つのdiv（top、middle、top）を1つずつ垂直に配置する必要があります。 – hguser

等高線の高さを偽るために背景画像を使用します。このクラスの使用をクリアするための

http://www.alistapart.com/articles/fauxcolumns/

：

チェックこの記事を

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
}

このような

<div style="border: solid 1px blue;min-height: 200px" id="middle" class="clearfix">

出典

2011-01-07 13:49:13 Diablo

float:leftが問題を引き起こしています。中間にクリアリング要素を挿入する必要があります。

例えば

<div style="border: solid 1px blue;min-height: 200px" id="middle"> 
     <div id="leftmenu" style="float: left;background-color:gray;width: 190px"> 
      <ul> 
       <li><a href=''>Link One</a></li> 
       <li><a href=''>Link Two</a></li> 
      <ul> 
     </div> 

     <div id="content" style="background-color: black;margin-left: 200px"> 
      I am in Link One 
     </div> 
     <div style="clear:both"></div> 
    </div>

JS Fiddle demo

出典

2011-01-07 14:00:06

ありがとうございます、あなたの答えはMatt Asbury'sと同じです。 ITは、ありがとう。 – hguser

@hguserああ、私は彼にそれを打つ:) –

@hguser実際にこの動作が必要な場合があります。つまり、その下のdivをオーバーレイするサイドメニューバーです。 –

ウェブページのレイアウト

答えて

関連する問題