3つのdivのアラインメント

3つのdivのスタイルを次の画像と同じにしたい。それをどうすれば実現できますか？3つのdivのアラインメント

enter image description here

私は、このようなHTMLコードを書く：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<style type="text/css"> 
#container{ 
background-color:#00ff00; 
width:500px; 
height:500px; 
} 
#leftDiv{ 
background-color:#ff0000; 
width:250px; 
height:500px; 
} 
#rightDiv{ 
background-color:#0000fff; 
widht:250px; 
height:500px; 
} 
#other{ 
background-color:#ffff00; 
widht:500x; 
height:500px; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="leftDiv"> 
</div> 
<div id="rightDiv"> 
<img src="Koala.jpg"> 
</div> 
</div> 
<div id="other"> 
</div> 
</body> 
</html>

しかし、結果は私の期待通りではない、私のコードの表現です： enter image description here

私は入れたいです2番目の（rightDiv）divに移動します。

助けてください。

ありがとうございました。

出典

2012-03-29 Tom

StackoverflowですべてのHTMLコードを表示することはできません。表示方法を知りません。 – Tom

コードに技術的な欠陥はありません。これは単なる誤植です。 – apnerve

こんにちは、あなたのスタイルシートに変更してやるだけです。

CSS

.container{ 
background-color:green; width:500px; 
} 

.leftDiv{ 
background-color:red; width:250px; 
height:500px; 
float:left; 
} 

.rightDiv{ 
background-color:pink; width:250px; 
height:500px; 
float:left; 
} 

.other{ 
background-color: #FFFF00; 
height:500px; 
clear:both; 
}

HTML

<div class="container"> 

    <div class="leftDiv">left</div> 
    <div class="rightDiv">right</div> 

    <div class="other">middle</div> 


</div>

と今、このCSSを試してみるこのhttp://jsfiddle.net/rohitazad/PLdyw/4/

出典

2012-03-29 05:36:23

divを整列させるには絶対位置を使用するのが最良の方法ではありません。より良い結果を得るには、代わりにfloat技法を使用する必要があります。 –

@MuhammadSannanKhalidあなたは私の答えを更新しました。 –

@azadそれは正しいです、私はあなたの最後のバージョンのコードを使用して、私のdivにはテーブルや他のものがあるので、結果は私が欲しいものと同じではありません。浮動小数点を使用して、今動作します。みんなありがとう。 – Tom

#otherに書き込んだスタイルルールが誤って入力されています。それは、でなく、widhtでなければなりません。

#other{ 
    background-color:#ffff00; 
    widht:500x; /* This should have been 'width'. Resorting to StackOverflow for a typo error? :-o */ 
    height:500px; 
}

PS：StackOverflowに投稿する前に、誤植を確認してください。ありがとう。

出典

2012-03-29 05:23:27 apnerve

返信いただきありがとうございます。誤植をおかけして申し訳ありません。しかし、正しい綴りエラーだけではうまくいきませんでした。 – Tom

これは画像の幅のためかもしれません。それは250pxより広いかもしれません。 'widht'を' width'に変更するとうまくいくはずです。私はすでにそれをテストしました（これらのような小さなものはテストする必要はありません） – apnerve

をご確認ください。

.container{ 
background-color:green; width:500px; 
height:500px; 
position:relative;} 

.leftDiv{ 
    float:left; 
background-color:red; width:250px; 
height:500px; 
} 

.rightDiv{ 
background-color:pink; width:250px; 
height:500px; 
float:left; 
} 

.other{ 
background-color: #FFFF00; 
    clear:both; 
    width:500px; 
height:500px; 
}

出典

2012-03-29 05:48:21

3つのdivのアラインメント

答えて

関連する問題