2

基本的な CSS について、理解できない、または答えが見つからない質問がいくつかあります。

まず、別の div タグ内に 3 つの div タグを配置してみました。他の 3 つのタグを含む最初のメイン div タグには、サイズ以外は何も設定されていませんでし400pxた400px。内部の他の 3 つの div のうち、すべてが20pxby20pxで、1float:leftつが assigned で、他の 2 つが右にフロートするスタイルが割り当てられています。すべての属性はスタイル内で定義され、2 つの div にfloat:rightは同じスタイルが割り当てられました。私の問題は、コードの最後にある 2 つの div のうち、ブラウザーに最初に表示されることであり、その理由がわかりませんでした。

コードは次のとおりです。

<html>
<head>
<style>
#main{ 
    border: red 4px dashed;
    width: 25%
    height: 25%,
    }
#left{ 
    float: left;    
    width: 20px;
    height: 20px,
    }
#right{ 
    float: right;   
    width: 20px;
    height: 20px,
    }
</style>
</head>
<body>
<div id="main">
<div id="left">1</div>
<div id="right">2</div>
<div id="right">3</div>
</div>
</body>
</head>
</html>
4

7 に答える 7

6

私の問題は、コードの最後にある 2 つの div のうち、ブラウザーに最初に表示されることであり、その理由がわかりませんでした。

あなたは「最初に現れる」を誤解していると思います。あなたのdivが右に浮くように設定します。したがって、コードで最初にある「2」divは、最初に右にフロートされるため、最初に右側に移動します。次に、「3」div がフローティングされるので、「2」div の左側に移動します。「2」が最初で、ブラウザ ウィンドウの右側で最初に配置され、div「3」が 2 番目になったためです。ウィンドウの右側に配置します。

この場合、「ウィンドウの右側の 2 番目の場所」は「最初に、左から見て」という意味です ;-)

于 2008-11-17T14:04:46.967 に答える
1

最初は、div に id ではなく class を使用します。ただし、css にはいくつかのタイプミスもあります。

#main{ 
    border: red 4px dashed;
    width: 25%;  /* <-- Missing ; */
    height: 25%; /* <-- change , to ; */
}
#left{ 
    float: left;        
    width: 20px;
    height: 20px; /* <-- change , to ; */
}
#right{ 
    float: right;       
    width: 20px;
    height: 20px; /* <-- change , to ; */
}
于 2008-11-17T14:08:07.817 に答える
0

階層化の問題についてはわかりませんが、同じ ID を持つ 2 つの要素を持つことはできません。あなたはおそらく欲しい：

...
<div class="right">2</div>
<div class="right">3</div>
...

CSSでに変更#rightします。.right

于 2008-11-17T14:05:35.560 に答える
0

あなたの問題は、クラスの代わりに id を使用していることだと思います。ID は一意であると想定されているため、id="right" を持つ 2 番目の div がその ID を持つ唯一のものです。

次のようにコードを変更できます。

< div class="right" >2< /div >

< div class="right" >3< /div >

(id="right" の代わりに)

CSS には次のようなものがあります。

。右 {

float: right;       

width: 20px;

height: 20px,

}

(#right の代わりに)

于 2008-11-17T14:06:01.363 に答える
-1 
<html>
<head>
<style>
#main {
    border: 4px dashed red;
    display: block;
    overflow: hidden;
}
#left {
    float: left;
    width: 20px;
    height: 20px,
}
#right {
    float: right;
    width: 20px;
    height: 20px,
}
</style>
</head>
<body>
<div id="main">
  <div id="left">1</div>
  <div id="right">3</div>
  <div id="right">2</div>
</div>
</body>
</head>
</html>
于 2015-04-22T11:49:04.490 に答える