Two divs are displayed side by side. There is a picture in the right div. If the picture is too large, it will squeeze the left div. What should I do? _html/css

Two divs are displayed side by side. There is a picture in the right div. If the picture is too large, it will squeeze the left div. What should I do? _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:01:44

Original

2169 people have browsed it

(1)

(2 ) (3)

(1) (2) (3) must be displayed horizontally, but the img picture is very large When (2) (3) goes below, how to solve this problem?

I tried to put two divs in a table with one row and two columns, but I don’t know how to adjust the width of the td in column 1. Settings, because (1) can be replaced by (1234....)

Reply to discussion (solution)

If you want to use pictures to support To increase the height of td, then

(2) (3)

#div2{position:relative;}
.div2_1{position:absolute;top:0px;left:opx;}
#div2 img{ padding-left:20px;}
Try absolute positioning yourself and get it quickly.

I tried it, but it doesn’t work. The div on the right still went down.

This is not just (2) (3).

It’s because of your The image is too wide and there is not enough space left, so it will float down.

You can consider setting the height and width of img

You can set the height and width of img

The height of img The width cannot be modified

The height and width of img cannot be modified

Then you probably can only write a horizontal scroll bar. . When the width is exceeded, a horizontal scroll bar appears

<!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>

Copy after login

You can calculate the width of the overall div by using the image returned from the background (you can first load the image with a hidden field to get its width), using jquery calculates the overall width and assigns the value to the width of the overall div.

Don’t complain if it’s not good.

I implemented this using xsl, there is no background, and it seems unnecessary to calculate the image size, because the total width of the table is fixed, and the image is too wide and squeezes the td on the left. I just hope it doesn't let td decrease.
Finally solved, td nowrap