12

2 つのdiv を横に並べて、フロートなしで同じ水平線に配置したい

Position:relative を試しましたが、うまくいきません

以下の例を参照してください: http://jsfiddle.net/XVzLK

<div style="width:200px;height:100px;background:#ccc;"> 
<div style="background:Blue; float:left; width:100px; height:100px;"></div> 
<div style="background:red; float:left; margin-left:100px; width:100px; height:100px;"></div>
</div>

上記のリンクから、赤いボックスを青いボックスと同じ行に配置し、下にスペースを入れないようにする必要があります..

編集：赤いボックスをコンテナの灰色のボックスの外に置いておきたい（そのまま）ありがとう

4

5 に答える 5

16

Relativeinline-blockディスプレイ付き

#one {
		width: 200px;
		background: #ccc;
	}

	#two {
		display: inline-block;
		background: blue;
		position: relative;
		left: 0;
		width: 100px; height: 100px;
	}

	#three {
		display: inline-block;
		background: red;
		position: relative;
		left: 0;
		width: 100px; height: 100px;
	}
<div id="one"><div id="two"></div><div id="three"></div></div>

編集

以下のコードも問題なく動作します。ここでは、コメントのため、改行をコメントアウトして無視しています。

#one {
		width: 200px;
		background: #ccc;
	}

	#two {
		display: inline-block;
		background: blue;
		position: relative;
		left: 0;
		width: 100px; height: 100px;
	}

	#three {
		display: inline-block;
		background: red;
		position: relative;
		left: 0;
		width: 100px; height: 100px;
	}
	<div id="one">
		<div id="two"></div><!--
		--><div id="three"></div>
	</div>

動作する理由 block非常に小さい を設定した場合でも、ディスプレイはコンテナーの幅全体を使用しwidth、残りのスペースはマージンとして使用されます (マージンを削除しても)。それが彼らの振る舞いです。ディスプレイは、指定したetc を尊重する点を除けば、ディスプレイとinline-block同じように機能します。しかし、彼らはまだ s を無視しています (私が間違っている場合は誰かが私を訂正してください)。インライン表示と同様に、 でそれらの間に改行を入れると、小さなスペースに変換されます。それを削除するために、ここでは HTML を 1 行にしています。コードをインデントすると、コード が押し下げられます (幅が固定されているため、高さはオプションのみです)。inlinepaddingmarginHTMLdiv#threediv#one

于 2013-06-16T06:50:39.133 に答える
5

高さと幅が固定されている場合は、Position プロパティを使用します

<div style="width:200px;height:100px;position:relative;background:#ccc;"> 
   <div style="background:Blue; position:absolute; left:0%; width:50%; height:100%;">
   </div> 
   <div style="background:red; position:absolute; left:50%; width:50%; height:100%;">
   </div>
</div>

于 2013-06-16T06:19:30.847 に答える
4

float、positionおよびを避けたい場合はinline-block、マージンのみの解決策を次に示します。

<div style="width:200px; background:#ccc;">
<div style="background:blue; width:100px; height:100px;"></div>
<div style="background:red; width:100px; height:100px; margin:-100px 0 0 100px;"></div>
</div>

更新されたフィドル

于 2013-06-16T18:15:04.753 に答える
1

フロートなしで div を同じ行に配置したい場合は、インライン ブロックdisplay: inline-block;にはそれらの間にマージンが含まれているため、div に負のマージン値を使用して与えることができます。

このフィドルを参照してください

あなたの編集された質問として、私はここに別のフィドルを提出しました

または、単にfiddlemargin-top: -100px;に追加することもできます。

于 2013-06-16T06:28:24.397 に答える
0

http://jsfiddle.net/XVzLK/22/

<div style="width:200px;position: relative; background:#ccc;">
<div style="background:Blue; position:absolute; top:0; left: 0; width:100px;height:100px;"></div>
<div style="background:red; position:absolute; top:0; right: 0; width:100px;height:100px;"></div>
</div>

色付きの div に相対的な位置を設定すると、それらの位置はドキュメント内の位置に相対的になります。あなたがやりたかったことは、含まれている div の位置を相対的にし、子 div をその中に絶対に配置することだと思います。「下にスペースがある」というのは「下にスペースがない」という意味だと思います

ここに役立つチュートリアルがあります: http://www.barelyfitz.com/screencast/html-training/css/positioning/

于 2013-06-16T06:28:47.850 に答える