2つのdivが並んで表示されます。右側のdivに画像がありすぎると、左側のdivが圧迫されてしまいます。 _html/css

2つのdivが並んで表示されます。右側のdivに画像がありすぎると、左側のdivが圧迫されてしまいます。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:01:44

オリジナル

2171 人が閲覧しました

(1)

(2) (3)

(1) (2) (3) は必ず横向きに表示してください。ただし、img 画像が特に大きい場合は、(2) ( 3) この問題を解決する方法を以下に説明します

1 行 2 列のテーブルに 2 つの div を配置しようとしましたが、列 1 の td の幅を設定する方法がわかりません。 1) は ( 1234....) に置き換えることができます

ディスカッション (解決策) に返信

td の高さをサポートするために画像を使用したい場合は、

(2) (3)

. div2_1{position:absolute;top:0px;left:opx;}
#div2 img{padding-left:20px;}
絶対位置を自分で試して、すぐに理解してください。

試してみましたが、まだ動作しません。

これは (2) (3) だけではありません

画像の幅が広すぎて、十分なスペースがないためです。フロートダウンします

画像の高さと幅を設定することを検討できます

画像の高さと幅を設定できます

画像の高さと幅は変更できません

その場合、おそらく水平スクロールバーのみを書くことができます。。幅を超えると、水平スクロールバーが表示されます

<!DOCTYPE HTML><head><title>数据</title><meta characterset="utf-8" /><style type="text/css">#content{	width:7000px;	 overFlow-x: scroll ; 	overFlow-y: hidden  ; }#content .test1{	width:500px;	height:500px;	display: inline-block;	background: red;}#content .test2{	width:500px;	height:500px;		display: inline-block;	background: blue;}#content .test3{	width:500px;	height:500px;		float:left;	background: #ccc;}</style> </head><body><div id="content">	<div class="test1">testedsafdsfdsa</div>	<div class="test2">testedsafd123</div>	<div class="test3">testedsaf456</div>	<div class="test1">testedsafdsfdsa</div>	<div class="test2">testedsafd123</div>	<div class="test3">testedsaf456</div>	<div class="test1">testedsafdsfdsa</div>	<div class="test2">testedsafd123</div>	<div class="test3">testedsaf456</div></div></body></html>

ログイン後にコピー

バックグラウンドから返された画像を使用して、div 全体の幅を計算できます (幅を取得するには、最初に隠しフィールドを含む画像をロードできます)。jquery を使用します。全体の幅を計算して値を割り当てます。div 全体の幅を指定します。

良くない場合はスプレーしないでください。

これをxslを使用して実装しました。背景はありません。テーブルの合計幅は固定されており、画像が広すぎて左側のtdを圧迫しているため、画像サイズを計算する必要はないようです。 tdが下がらないことを祈るばかりです。

ついに解決しました、TD Nowrap