次のdivが並んで表示されないのはなぜですか?私はそれが次のように見えるようにしようとしているhttp://jsfiddle.net/YxCK4/Divsは並んで表示されませんか?
...
___________________________
| left| |
| | |
| | main | <--- Window.
| | |
| | |
|-------------------------|
次のdivが並んで表示されないのはなぜですか?私はそれが次のように見えるようにしようとしているhttp://jsfiddle.net/YxCK4/Divsは並んで表示されませんか?
...
___________________________
| left| |
| | |
| | main | <--- Window.
| | |
| | |
|-------------------------|
ブロックレベル要素が自然にお互いに次のサイドませんが、手動でその振る舞いを定義する必要があります。両方のdivをfloat:left
と定義して並べて配置します。
#left, #main { float:left }
inline-block
またはfloat
それらleft
として表示<div>
年代にこのような何か:divタグはブロックレベル要素です
#window{
width: 90%;
}
#left{
padding: 10px;
width: 85px;
display: inline-block;
}
#main{
display: inline-block;
}
、あなたは、インラインを使用する必要がありますCSS floatでスパンやオーバーライドのような要素:left
今のところjsfiddleと言われているように、#leftと#mainの両方のコンテナは浮動小数点数にする必要があります+ floatで取ることができる幅よりも広い場合は、自動的に自動的に下に移動し、正しいものを設定しようとする必要があります。私はこれを追加しました
#left,#main
{
float:left
}
#main
{
width:300px; // 90% is not correct here and will not work
}
divsはデフォルトでブロックレベルの要素なので、 – j08691
divのようなブロック要素を隣り合わせにするには、css floatを使用する必要があります。ここにこれを示すあなたのフィドルのアップデートがあります:http://jsfiddle.net/YxCK4/12/ –
@TJ。フロートを使用する必要はありませんが、これを達成するための最も一般的な手法の1つです。 – kapa