Html CSS div 左右浮动 nowrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16638172/
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
CSS div float left and right nowrap
提问by rustybeanstalk
A little background: I am working on a header which spans the entire with on the top of my webpage. I would like the current username, a logout button, etc. to be floated to the right in the header, and I would like the logo and some navitems to be on the left. When the browser window shrinks such that the left items and the right items collide, I do NOT want them to wrap. I have the header-container div set to overflow: auto, so I would like it to start scrolling.
一点背景：我正在处理一个跨越整个网页顶部的标题。我希望当前用户名、注销按钮等浮动到标题的右侧，我希望徽标和一些导航项位于左侧。当浏览器窗口缩小以至于左侧项目和右侧项目发生碰撞时，我不希望它们换行。我将标题容器 div 设置为溢出：自动，所以我希望它开始滚动。
The question: Even when I have a div float:left and a div float:right both with display:inline-block, and the parent with white-space:no wrap - the wrap!!! By chance I figured out I could get it to work by enclosing the yet another div also with display:inline-block. Why is this???
问题：即使我有一个 div float:left 和一个 div float:right 都带有 display:inline-block，而父级带有 white-space:no wrap - wrap！偶然地，我发现我可以通过用 display:inline-block 封闭另一个 div 来让它工作。为什么是这样？？？
Below is my code and a working jsfiddle to show both the working setup, and setup which wraps. I don't understand why I need the extra div. http://jsfiddle.net/klyngbaek/tNHLL/9/
下面是我的代码和一个工作 jsfiddle 来显示工作设置和包装的设置。我不明白为什么我需要额外的 div。 http://jsfiddle.net/klyngbaek/tNHLL/9/
When I shrink the window, I do not want to the second blue rectangle to drop to a new line
当我缩小窗口时，我不想将第二个蓝色矩形放到新行
HTML:
HTML：
<h2>With extra inline-block dive. The blue rectangles do not wrap.</h2>
<div class="wrapper nowrap">
<div class="second-wrapper">
<div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div>
<div class="floating float-right">[username] | logout</div>
</div>
</div>
<h2>Without extra inline-block dive. The blue rectangles do wrap.</h2>
<div class="wrapper nowrap">
<div class="floating float-left">[logo] | home | [navitem1] | [navitem2]</div>
<div class="floating float-right">[username] | logout</div>
<div class="clearfix"></div>
</div>
CSS:
CSS：
.wrapper {
border:#333;
margin-bottom:;
}
.second-wrapper {
border:;
display:inline-block;
min-width: 100%;
}
.nowrap {
white-space: nowrap;
}
.clearfix {
clear: both;
}
.floating {
background: lightblue;
border:;
height:;
padding:}
.float-left {
float: left;
}
.float-right {
float: right
}
Or perhaps there is a better way to accomplish what I want.
或者也许有更好的方法来完成我想要的。
Thanks in advance!
提前致谢！
edit: updated jsfiddle link
编辑：更新 jsfiddle 链接
采纳答案by Alan Wells
Example with left, right, top and bottom margins added; multiple divs; adjust height of main frame; set left margin for left most left floating div; and right margin of right most floating Div:
添加了左、右、上、下边距的示例；多个div；调整主机架高度；为最左边的浮动 div 设置左边距；和最右边浮动 Div 的右边距：
Result:
结果：
Styling and HTML in one file:
一个文件中的样式和 HTML：
<html>
<body>
<style>
.row {
float:left;
border: 3px solid blue;
width: 96%;
margin-left: 2%;
margin-right: 2%;
height: 115px;
overflow: auto;
position: static;
}
.floatLeftDiv {
display: inline-block;
border: 3px solid red;
width: 200px;
height: 100px;
margin-top: 3px;
}
.right {
float: right;
border: 3px solid red;
width: 200px;
height: 100px;
margin-top: 3px;
margin-right: 1%;
}
</style>
<div class="row">
<div class="floatLeftDiv" style="margin-left: 1%;">Inline Item A:</div>
<div class="floatLeftDiv">Inline Item B:</div>
<div class="floatLeftDiv">Inline Item C:</div>
<div class="right">Inline Item D:</div>
</div>
</body>
</html>
Code modified from this discussion and another one.
从此讨论和另一个讨论中修改的代码。
回答by BingeBoy
display:inline-block effects the children of the selector. Here is updated version where removed inline-block from the child elements.
display:inline-block 影响选择器的子级。这是从子元素中删除内联块的更新版本。
I'd have to see the markup of the page you are trying to layout. I'm wondering if using positioning might be the way to go.
我必须查看您要布局的页面的标记。我想知道是否使用定位可能是要走的路。
Here check this and let me know if it helps: http://jsfiddle.net/taUgM/
在这里检查一下，让我知道它是否有帮助：http: //jsfiddle.net/taUgM/
* { Box-sizing: Border-box }
.wrapper {
border: 1px dashed #333;
margin-bottom: 10px;
overflow: auto;
width: 100%;
position:absolute;
}
.box{
width:50px;
height:50px;
border:1px solid yellow;
display:block;
position: relative;
}
.title-etc{
top:0;
left:0
float:left;
background:blue;
}
.login-box{
top:0;
right:0;
float:right;
background:red;
}
