Heim > Artikel > Web-Frontend > 两个div左右并列显示，右边的div里有图片，图片太大时，会挤压左边的div，怎么办？_html/css_WEB-ITnose
两个div左右并列显示，右边的div里有图片，图片太大时，会挤压左边的div，怎么办？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:01:442169Durchsuche
(1)
(2) (3)
![两个div左右并列显示，右边的div里有图片，图片太大时，会挤压左边的div，怎么办？_html/css_WEB-ITnose]()
(1) (2) (3)是必须横向显示的，可是img的图片特别大时，(2) (3)就到下面去了，怎么解决这个问题啊
我尝试将两个div放在一行两列的table里，但是列1的td的宽度不知道怎么设置，因为(1)可以替换为(1234.....)
回复讨论(解决方案)
如果你想用图片撑起td的高度，那就
(2) (3)
#div2{position:relative;}
.div2_1{position:absolute;top:0px;left:opx;}
#div2 img{padding-left:20px;}
自己试试绝对定位很快搞定。
试了，不好用啊，右边的div还是跑到下面去了
这个不只是（2）（3）下去了
是因为你的图片过宽 剩下的位置不够了 所以就会飘到下面去
可以考虑给img定高宽
可以给img定高宽
img的高宽不能修改
img的高宽不能修改
那你估计只能写个横向滚动条了。。超出宽度就出现横向滚动条
<!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实现的，没有后台，而且计算图片大小似乎没有必要，因为table的总宽度是固定的，图片太宽把左边的td挤压小了。我只是希望别让td减小。
最后解决了，td nowrap
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Codeforces Round #256 (Div. 2) D. Multiplication Table_html/css_WEB-ITnoseNächster Artikel：codeforces248(div1) B Nanami's Digital Board