ホームページ > 記事 > ウェブフロントエンド > 2つのdivが並んで表示されます。右側のdivに画像がありすぎると、左側のdivが圧迫されてしまいます。 _html/css_WEB-ITnose
2つのdivが並んで表示されます。右側のdivに画像がありすぎると、左側のdivが圧迫されてしまいます。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:01:442131ブラウズ
4049217fb5027bd2398e2b36ef0577af(1) 16b28748ea4df4d9c2150843fecfba68
eddf46d24ba7dbbc699d958c424f25d8(2) (3) 0c6dc11e160d3b678d68754cc175188a09aa85e2d05996e1afa18bb7f869d9f216b28748ea4df4d9c2150843fecfba68 (1) (2) (3) は必ず横向きに表示してください。ただし、img 画像が特に大きい場合は、(2) ( 3) この問題を解決する方法を以下に説明します
1 行 2 列のテーブルに 2 つの div を配置しようとしましたが、列 1 の td の幅を設定する方法がわかりません。 1) は ( 1234....) に置き換えることができます
ディスカッション (解決策) に返信
td の高さをサポートするために画像を使用したい場合は、101b305829be332bcc86ac004f8bee48 337465104d5af605ba99be49f5193960(2) (3)16b28748ea4df4d9c2150843fecfba6832e245e3b1c16ebeffc31bd8ef207b1a16b28748ea4df4d9c2150843fecfba68 {position:relative;}
. 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が下がらないことを祈るばかりです。