CSS div浮动左和右nowrap_Css_Html_Css Float

CSS div浮动左和右nowrap

css html

CSS div浮动左和右nowrap,css,html,css-float,Css,Html,Css Float,一点背景：我正在制作一个标题，它覆盖了整个网页，并在我的网页顶部。我想当前的用户名，注销按钮等浮动到标题的右边，我想在左边的标志和一些Navitem。当浏览器窗口收缩，使左侧项目和右侧项目发生碰撞时，我不希望它们换行。我将header container div设置为overflow:auto，因此我希望它开始滚动问题是：即使我有一个div-float:left和一个div-float:right，这两个都带有display:inline块，并且父对象带有空白：no wrap-the wr

一点背景：我正在制作一个标题，它覆盖了整个网页，并在我的网页顶部。我想当前的用户名，注销按钮等浮动到标题的右边，我想在左边的标志和一些Navitem。当浏览器窗口收缩，使左侧项目和右侧项目发生碰撞时，我不希望它们换行。我将header container div设置为overflow:auto，因此我希望它开始滚动

问题是：即使我有一个div-float:left和一个div-float:right，这两个都带有display:inline块，并且父对象带有空白：no wrap-the wrap！！！我偶然发现，我可以通过使用display:inline块封装另一个div来实现它。这是为什么

下面是我的代码和一个工作JSFIDLE，它显示了工作设置和包装的设置。我不明白为什么我需要额外的div。

当我缩小窗口时，我不希望第二个蓝色矩形下降到新行

HTML:

或者也许有更好的方法来完成我想要的

提前谢谢

编辑：更新的JSFIDLE链接显示：内联块影响选择器的子项。这里是更新版本，其中从子元素中删除了内联块

我必须查看您试图布局的页面的标记。我想知道使用定位是否是一种可行的方法

在这里检查此项，并让我知道它是否有帮助：

添加了左、右、上、下边距的示例；多个div；调整主机架的高度；为最左边的浮动div设置左边距；和最右边浮动Div的右边距：

结果:

在一个文件中设置样式和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>


.行{
浮动：左；
边框：3件纯蓝；
宽度：96%；
左缘：2%；
保证金权利：2%；
高度：115px；
溢出：自动；
位置：静态；
}
.laftleftdiv{
显示：内联块；
边框：3倍纯红；
宽度：200px；
高度：100px；
利润上限：3倍；
}
.对{
浮动：对；
边框：3倍纯红；
宽度：200px；
高度：100px；
利润上限：3倍；
保证金权利：1%；
}
内联项目A：
内联项目B：
内联项目C：
内联项目D：

从本次讨论和另一次讨论中修改的代码。

我认为您忘记了fiddle中的clearfix div，我认为第二个包装器拉伸以包含两个浮动div的原因是因为它的display属性设置为inline-block。谢谢您的评论。也许我对我的问题不是很清楚。我不关心蓝色矩形包装的内容。我担心当浏览器窗口变得太小时，会有两个蓝色矩形环绕。当窗口变得太小时，您在JSFIDLE中添加的示例将第二个矩形放置到新行。这就是我试图避免的。谢谢谢谢这里似乎缺少分号“left:0 float:left；”在类标题等中，如果我添加分号，它将再次开始换行。然而，如果我拿走了浮子：左它似乎工作！是的，不需要那个浮子。另一个应该也能去。我确实需要浮子：对。否则，蓝色框将直接显示在红色框的下方

.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
}

* { 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;
}

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