Html 防止浮动左div转到新行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10891293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent float left div from going to a new line
提问by Sir
I have 4 divs that are set to float left but the end div keeps wrapping two a new line on a smaller screen which is really annoying me...i want them to scale with the screen size so they always stay on the same line regardless of screen size... and im trying not to use a table (which is very tempting giving they v.reliable for this!!!)
我有 4 个设置为向左浮动的 div，但最后的 div 在一个较小的屏幕上不断换行两个新行，这真的很烦我……我希望它们随屏幕尺寸缩放，因此无论如何它们始终保持在同一行上屏幕大小……我尽量不使用桌子（这很诱人，因为他们对此非常可靠！！！）
I'm wondering how to fix this annoying issue so they always stay in position regardless of screen size??
我想知道如何解决这个烦人的问题，这样无论屏幕大小如何，它们都始终保持原位？
I have this as my CSS:
我有这个作为我的 CSS：
.wrapper{
margin:0 auto;
width: 80%;
display: table-cell;
}
.gridf{
float:left;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:200px;
min-height:200px;
border:1px solid white;
}
.gridl{
float:left;
margin-left: 3px;
width:200px;
min-height:200px;
border:1px solid white;
}
My HTML:
我的 HTML：
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Please help :D
请帮忙:D
采纳答案by Rohit Azad
Hi i think you should this check to this demo
嗨，我认为你应该检查这个演示
.wrapper {
margin: 0 auto;
width: 80%;
border: solid 1px red;
overflow: hidden;
}
.gridf,
.grid,
.gridl {
Background: green;
width: 24%;
min-height: 100px;
float: left;
margin: 2px 0;
}
.gridf {} .grid {
margin: 2px 1%;
}
.gridl {
background: yellow;
}<div class="wrapper">
<div class="gridf">One</div>
<div class="grid">Two</div>
<div class="grid">Three</div>
<div class="gridl">Four</div>
</div>回答by DA.
Your wrapper is a percentage width container with 4 fixed-width child elements floated.
您的包装器是一个百分比宽度的容器，其中浮动了 4 个固定宽度的子元素。
The width of the wrapper is dependent on the width of the viewport. If the viewport is narrowed to the point that the wrapper's width is less than that of the 4 child element widths together, then naturally they won't all fit and therefore will wrap.
包装器的宽度取决于视口的宽度。如果视口缩小到包装器的宽度小于 4 个子元素宽度加在一起的宽度，那么它们自然不会全部适合，因此会包装。
The fix is to make sure your wrapper doesn't get smaller than the combination of the children.
解决方法是确保您的包装器不会比孩子的组合小。
So, add up with widths, borders and margins of the child elements and then give the wrapper a min-widthattribute equal to that.
因此，将子元素的宽度、边框和边距相加，然后给包装器一个min-width等于它的属性。
回答by Grzegorz
Although this is an old post, I think that the problem, which I also run into, is the fact that you want all these cells to be of a fixed size, and not %, right? The solution you chose changed initial format where you specified width:200px;
虽然这是一篇旧帖子，但我认为我也遇到的问题是，您希望所有这些单元格的大小都是固定的，而不是 %，对吗？您选择的解决方案更改了您指定的初始格式width:200px;
Well, I would suggest to look here: http://jsfiddle.net/gn2bg/
好吧，我建议看这里：http: //jsfiddle.net/gn2bg/
The ONLY one thing I did is to add inner wrapper around your cells:
我做的唯一一件事就是在你的单元格周围添加内部包装：
.inwrapper{
float:left;
overflow: hidden;
min-width: 830px;
}
and new html as this:
和新的 html 如下：
<div class="wrapper">
<div class="inwrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
Notice that your wrapper requires 80% of space. The inwrapper, however, tells that its size is fixed - 830px (total of all internal div sizes plus room for padding.) This way inwrapper uses 'elbows' to stretch the width, and override these 80% of 'wrapper'
请注意，您的包装器需要 80% 的空间。然而，inwrapper 告诉它它的大小是固定的 - 830px（所有内部 div 大小加上填充空间的总和。）这种方式 inwrapper 使用“肘部”来拉伸宽度，并覆盖这 80% 的“wrapper”
I understand that you already made decision as to what is your best solution. I am leaving this response to anyone else in the future who needs exact answer to your exact question.
我知道您已经决定了最佳解决方案。我将把这个回答留给将来需要确切回答您的确切问题的任何其他人。
回答by j08691
You can try removing the table-cell display rule from the wrapper and setting percentages (or min-widths) on the child divs like this jsFiddle example.
您可以尝试从包装器中删除表格单元格显示规则，并在子 div 上设置百分比（或最小宽度），例如 jsFiddle 示例。
回答by tibo
That should do the trick :
这应该够了吧 ：
<div class="wrapper">
<div style="width:850px">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
And that will be supported on any browser. http://jsfiddle.net/5GrKU/3/
这将在任何浏览器上得到支持。 http://jsfiddle.net/5GrKU/3/
回答by Murtaza
HTML
HTML
<div style="overflow: hidden;">
<div class="wrapper">
<div class="gridf"></div>
<div class="grid"></div>
<div class="grid"></div>
<div class="gridl"></div>
</div>
</div>
CSS
CSS
.wrapper{
margin:0 auto;
width: 80%;
display: inline;
}
.gridf{
float:left;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.grid{
float:left;
margin-left: 3px;
margin-right:3px;
width:20%;
min-height:200px;
border:1px solid red;
}
.gridl{
float:left;
margin-left: 3px;
width:20%;
min-height:200px;
border:1px solid red;
}
for you reference i have also added the URL of the demo. http://jsfiddle.net/sg8FE/
供您参考，我还添加了演示的 URL。http://jsfiddle.net/sg8FE/
UPDATE
更新
just change display:inlinein wrapper class to display:blockrest all is right and the div's are centered.
只需更改display:inline包装器类即可，display:block一切都正确并且 div 居中。
回答by maksbd19
by giving a fixed width in your inner divs you are forcing them to have that width no matter what is the size of the view port. And giving the outer div a width of 80% you are shrinking its size with the width of your view port. You need to do either giving fixed width to all those divs or giving a relative width to all.
通过在内部 div 中提供固定宽度，无论视口的大小如何，您都将迫使它们具有该宽度。并为外部 div 提供 80% 的宽度，您将随着视口的宽度缩小其大小。您需要为所有这些 div 提供固定宽度或为所有 div 提供相对宽度。
