我在用：
<div class="class1">Image</div> <div class="class2">Image</div> <div class="class3">Image</div> <div class="class4">Image</div>我使用图像作为背景，它们都应该在同一行（所有图像）。 我正在使用float:left两个图像将float:right 。 但是我的问题在浏览器调整大小时开始。 所有图像都会在不同的行中混乱。
任何帮助都是适用的。
I am using:
<div class="class1">Image</div> <div class="class2">Image</div> <div class="class3">Image</div> <div class="class4">Image</div>I am using images as background which should all be in the same line (all images). I am using float:left in which two images will be float:right. But my problem starts when the browser is resizing. All the images will be disordered in different lines.
Any help is appreaciated.
最满意答案
你的问题不清楚。
如果你想要所有四个div（以及为什么你使用div而不是<img>？）保持连续，如果浏览器窗口太小则没有包裹在下面的行上，那么你可以试试（假设图像宽度为200px - 为简单起见使用样式而不是类 - 这不适合部署！）：
<div style="width:800px"> <div class="class1">Image</div> <div class="class2">Image</div> <div class="class3">Image</div> <div class="class4">Image</div> </div>这将强制容器div足够宽以连续包含所有四个图像。 但是，如果浏览器的宽度不足以显示它们，您将获得一个水平滚动条（从用户体验的角度来看这不是很好）
或者，使用您当前的HTML，然后将所有HTML浮动。 如果调整浏览器窗口的大小，则最后一个图像将下降到下一行，并且div应保持相同的顺序
Your question is unclear.
If you are wanting all four divs (and why are you using a div instead of an <img>?) to stay in a row, and not wrap onto the line below if the browser window is too small, then you could try (assuming an image width of 200px - using a style instead of a class for simplicity - this is not suitable for deployment!):
<div style="width:800px"> <div class="class1">Image</div> <div class="class2">Image</div> <div class="class3">Image</div> <div class="class4">Image</div> </div>This will force the container div to be wide enough to contain all four images in a row. However, if the browser isn't wide enough to show them, you will get a horizontal scroll bar (which is not good from a User Experience point of view)
Alternatively, use your current HTML, and just float all of them left. If the browser window is resized, then the last image will drop onto the next row, and the divs should remain in the same order
更多推荐
发布评论