Maison >interface Web >tutoriel HTML >两个div左右并列显示，右边的div里有图片，图片太大时，会挤压左边的div，怎么办？_html/css_WEB-ITnose
两个div左右并列显示，右边的div里有图片，图片太大时，会挤压左边的div，怎么办？_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:01:442206parcourir
(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
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Codeforces Round #256 (Div. 2) D. Multiplication Table_html/css_WEB-ITnoseArticle suivant：codeforces248(div1) B Nanami's Digital Board