logo标签列表

CSS div浮动左右不换行

csshtmlcss-float
9

一些背景信息：我正在处理一个跨越整个网页顶部的标题。我希望当前用户名、注销按钮等靠右对齐，而标志和一些导航项则在左侧。当浏览器窗口缩小，使得左侧和右侧的项目相遇时，我不希望它们换行。我将header-container div设置为overflow:auto，所以我希望它开始滚动。

问题是：即使我有一个float:left的div和一个float:right的div，两者都有display:inline-block，并且父元素具有white-space:no wrap-它们还是换行了！！！偶然间我发现，通过再包含一个也具有display:inline-block的div，可以让它正常工作。这是为什么？

下面是我的代码和一个工作的jsfiddle，展示了工作的设置和换行的设置。我不明白为什么需要额外的div。 http://jsfiddle.net/klyngbaek/tNHLL/9/

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

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（层叠样式表）：
.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
}

也许有更好的方法来实现我的目标。提前谢谢！编辑：更新了jsfiddle链接。
我认为你在fiddle中忘记了clearfix div，而且我认为second-wrapper能够容纳两个floated-divs的原因是它的display属性设置为inline-block。 - Trond Hatlen
2个回答
9

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

结果：

enter image description here

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

该代码修改自这个讨论和另一个讨论。

4

display:inline-block会影响选择器的子元素。这里是更新后的版本，从子元素中删除了inline-block。

http://jsfiddle.net/ccsuP/

我需要看到您正在布局的页面的标记。我想知道是否使用定位可能是解决问题的方法。

请查看此处并告诉我是否有所帮助： 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;
}
感谢您的评论。也许我的问题表述不够清晰。我并不关心蓝色矩形包裹的内容。我关心的是当浏览器窗口变得太小时，两个蓝色矩形的包裹情况。您在jsfiddle中添加的示例中，当窗口变得太小时，第二个矩形会跳到新行。这就是我想要避免的。谢谢！ - rustybeanstalk
谢谢。看起来你在class title-etc中缺少一个分号'left: 0 float:left;'。如果我添加分号，它会重新开始折行。但是，如果我去掉float:left，它似乎能够正常工作！ http://jsfiddle.net/kristianlyngbaek/taUgM/1/ - rustybeanstalk
不需要那个浮点数，另一个也应该可以。 - BingeBoy
我确实需要float:right。否则蓝色框将直接出现在红色框下方。 - rustybeanstalk
让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/30234/discussion-between-klyngbaek-and-bingeboy - rustybeanstalk
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接