两个div左右并列显示，右边的div里有图片，图片太大时，会挤压左边的div，怎么办？

跳蚤图 2014-07-11 08:54:55

<div id="div1" style="float:left">(1) </div>
<div id="div2" style="float:left">(2) (3)<br><img src="..."/></div>
(1) (2) (3)是必须横向显示的，可是img的图片特别大时，(2) (3)就到下面去了，怎么解决这个问题啊

我尝试将两个div放在一行两列的table里，但是列1的td的宽度不知道怎么设置，因为(1)可以替换为(1234.....)

...全文

421 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

跳蚤图 2014-07-16

打赏
举报

我这个用xsl实现的，没有后台，而且计算图片大小似乎没有必要，因为table的总宽度是固定的，图片太宽把左边的td挤压小了。我只是希望别让td减小。最后解决了，td nowrap

JPF1024 2014-07-15

打赏
举报


<!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的宽度。不好勿喷。

JPF1024 2014-07-15

打赏
举报

引用 5 楼 feier00 的回复:

img的高宽不能修改

那你估计只能写个横向滚动条了。。超出宽度就出现横向滚动条

跳蚤图 2014-07-15

打赏
举报

img的高宽不能修改

书香卷气 2014-07-11

打赏
举报

可以给img定高宽

紫紫紫紫紫紫紫紫紫紫紫紫霞 2014-07-11

打赏
举报

这个不只是（2）（3）下去了是因为你的图片过宽剩下的位置不够了所以就会飘到下面去可以考虑给img定高宽

跳蚤图 2014-07-11

打赏
举报

试了，不好用啊，右边的div还是跑到下面去了

皓月长空 2014-07-11

打赏
举报

如果你想用图片撑起td的高度，那就<div id="div2" style="float:left"><div class="div2_1">(2) (3)</div><img src="..."/></div> #div2{position:relative;} .div2_1{position:absolute;top:0px;left:opx;} #div2 img{padding-left:20px;} 自己试试绝对定位很快搞定。