CSSフロートとHTMLの質問

StackOverflow https://stackoverflow.com/questions/295611

  •  08-07-2019
  •  | 
  •  

質問

基本的なCSSについて、理解できない、または答えを見つけることができなかった質問があります。

最初に、3つのdivタグを別のdivタグ内に配置してみました。他の3つのタグを含む最初のメインdivタグには、サイズ以外は何も設定されていませんでした。サイズは400px by 20pxです。内部の他の3つのdivのうち、すべてはfloat:leftによってfloat:rightであり、1は<=>に割り当てられ、他の2つは右フロートのスタイルに割り当てられました。すべての属性はスタイル内で定義され、<=>であった2つのdivには同じスタイルが割り当てられました。私の問題は、2つのdivのうち、コードの最後に来た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>
役に立ちましたか？

解決

  

私の問題は、2つのdivのうち、   コードの最後に来たもの、   ブラウザで最初に表示され、私は   の理由を理解していなかった   これ。

<！> quot;が最初に現れる<！> quot;を誤解したと思います。あなたのdivを右に浮かせるように設定します。 <！> quot; 2 <！> quot;コードで最初に表示されるdivは、最初に右にフロートされるため、最初に右側に移動します。 <！> quot; 3 <！> quot; divはフロートされるため、<！> quot; 2 <！> quot;の左側に移動します。 div-<！> quot; 2 <！> quot;最初で、ブラウザウィンドウの右側で1位になり、div <！> quot; 3 <！> quot;ウィンドウの右側で2位になりました。

この場合<！> quot;ウィンドウの右側の2番目の場所<！> quot; <！> quot;まず、左から見た<！> quot; ;-）

他のヒント

最初は、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 ; */
}

階層化の問題については知りませんが、同じIDを持つ2つの要素を持つことはできません。おそらく必要です：

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

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

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

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

<！> lt; div class = <！> quot; right <！> quot; <！> gt; 2 <！> lt; / div <！> gt;

<！> lt; div class = <！> quot; right <！> quot; <！> gt; 3 <！> lt; / div <！> gt;

（id = <！> quot; right <！> quot;の代わりに）

CSSでは次のようになります。

.right {

float: right;       

width: 20px;

height: 20px,

}

（＃rightの代わり）

<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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top