2 つの div を 1 行に表示する方法_html/css_WEB-ITnose

<div id="father" style="width:70px;height:30px;overflow:hidden;border:1px solid;">	<div id="son" style="width:100%;height:30px;overflow:hidden;white-space:nowrap;"><!--不修改这个div的像素宽度-->			<!--使这两个div能排在一行-->		<div id="grandson1" style="float:left;width:50px;height:30px;background-color:gray;">xxx</div>		<div id="grandson2" style="float:left;width:50px;height:30px;background-color:pink;">yyy</div>			</div></div>

要件:
1. 父親を変更しないでください
2. 息子の特定のピクセル値を指定できません。
3. grandson1 と grandson2 を 1 行にまとめます

ディスカッションに返信（解決策）

あなたのお父さんは 70 歳で、次の 2 人は 50 歳ですが、なぜ 1 行に並んでいますか?

c5086f0c83ea698b27cbbf5c7d69730c 6c6aaa645ee027395a6f21916b02c4db809d647834b450f6c0d606e310d93985

ae6ec2bcf51a5346e066c7f746dc51bf
f37ab188935a68e2c8ad6f484e55598cxxx16b28748ea4df4d9c2150843fecfba68
2cf360bcb2e3a98e0ec88e6d71df3081yyy16b28748ea4df4d9c2150843fecfba68


オリジナルポスターこれはつまり？


grandson1 diaplay:inline;
grandson2 diaplay:inline;
代わりに float を使用することもできます

grandson1 diaplay:inline;

あなたfloat も使用できます

Three Lou の考えは正しいですが、インラインはあまり互換性がないと言われています

grandson1 diaplay:inline;
grandson2 diaplay:inline;

代わりに float を使用することもできます

3 階の考えは正しいですが、と言われていますinline はあまり互換性がありません

z-index は大丈夫ですか?

すごい

HTML コード
0336cdb5f8427c509262c8fcd2b4846a
fe189b7bc683250bd7e5dd2cd9902b2d<......
+1

位置決めを使用してドキュメントから分離します

9 階の acesidonu の返信からの引用:

HTML コード

0336cdb5f8427c509262c8fcd2b4846a "son" style=" width:100%;height:30px;overflow:hidden;white-space:nowra...
笑 この効果は実際にデタッチすることで達成できます

絶対位置を使用するだけです