私はCSSとHTMLにはかなり新しいです。別のdivでdivをフローティングすることに問題があります。 オンラインでかなりのリサーチを行ったことがありますが、解決策を提示する。アニメーターのdiv内にdivを左右に配置する
これらは私が読んでいない使用しているサイトです。
barelyfitz /スクリーンキャスト/ htmlのトレーニング/ CSS /ポジショニング/
stackoverflowの/質問/ 580195/CSSレイアウト-2 -column固定流体
mirificampress /show.php?id=106
How to get Floating DIVs inside fixed-width DIV to continue horizontally?
私のコードはjsFiddleにありますhere
。 CSS：
#left, #right {
width: 100px; //change this to whatever required
float: left;
}
HTML：
<div id="wrapper">
<div id="left">
<p class="t0">lorum itsum left</p>
<div>
<div id="right">
<p class="t0">lorum itsum right</p>
<div>
<div>
このようにしますか？私はこれが役立つことを願っています
<div id="wrapper">
<div id="inner">
<div id="left">
Left Content
</div>
<div id="right">
Right Content
</div>
</div>
</div>
div {
height: 50px;
}
#wrapper {
width: 200px;
overflow-x: auto;
overflow-y: hidden;
background-color: #ccc;
}
#inner {
width: 400px;
}
#left {
width: 150px;
float: left;
background-color: #f00;
}
#right {
width: 150px;
float: left;
background-color: #0f0;
}
あなたが初心者なので。私はそれをまっすぐにします。以下はあなたのコードの抽出です。内部のスタイルシートを使用しました。あなたの例では、外部スタイルシートを使用しています。 float属性を使用すると、左と右に設定できます。ここで使用されている浮動小数点数：左に1 div左に浮いて浮動小数点：右に他の1つを照らすために右。 開かれたタグはすべて閉じたタグでなければなりません。
<head>
</head>
<!--Internal style sheet-->
<style>
.left{
float:left;
}
.right{
float:right;
}
</style>
<body>
<div id="wrapper" >
<div class="left">
<p class="t0">lorum itsum left</p>
</div>
<div class="right">
<p class="t0">lorum itsum right</p>
</div>
</div>
</body>
</html>
その他の注意：左右のdivのサイズを調整する場合は、スタイルシートの幅を使用してください。以下の更新されたスタイルシートを参照してください。 divの幅を画面の幅の80％、右の幅を20％にしました（合計は100％にする必要があります）。それに応じて調整します。背景色はdivの背景色を設定するために使用します。
.left{
float:left;
background-color:powderblue;
width:80%;
}
.right{
float:right;
width:20%;
background-color:yellow;
}
タグを正しく閉じていることを確認してください。あなたのdivには正しい終了タグがないため、あなたが期待しているようにあなたのコンテンツをラップしていません。 – kinakuta
フロートはどこですか？ – PeeHaa
私はhttp://www.positioniseverything.net/easyclearing.htmlで見つけた何かを試すために浮動小数点数を削除しました – RLoniello