Home >Web Front-end >HTML Tutorial >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
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
- WBOYOriginal
- 2016-06-24 12:01:442204browse
4049217fb5027bd2398e2b36ef0577af(1) 16b28748ea4df4d9c2150843fecfba68
eddf46d24ba7dbbc699d958c424f25d8(2 ) (3)0c6dc11e160d3b678d68754cc175188a09aa85e2d05996e1afa18bb7f869d9f216b28748ea4df4d9c2150843fecfba68
(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, theneddf46d24ba7dbbc699d958c424f25d8337465104d5af605ba99be49f5193960(2) (3)16b28748ea4df4d9c2150843fecfba682f181eb626093ca287d06df1c84c33b916b28748ea4df4d9c2150843fecfba68
#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> 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