> 웹 프론트엔드 > HTML 튜토리얼 > 两个div左右并列显示,右边的div里有图片,图片太大时,会挤压左边的div,怎么办?_html/css_WEB-ITnose

两个div左右并列显示,右边的div里有图片,图片太大时,会挤压左边的div,怎么办?_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:01:44
원래의
2201명이 탐색했습니다.

(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)
两个div左右并列显示,右边的div里有图片,图片太大时,会挤压左边的div,怎么办?_html/css_WEB-ITnose

#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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿