9

一点背景知识：我正在研究一个标题，它在我的网页顶部横跨整个页面。我希望当前用户名、注销按钮等在标题中浮动到右侧，并且我希望徽标和一些导航项位于左侧。当浏览器窗口缩小以致左侧项目和右侧项目发生碰撞时，我不希望它们换行。我将 header-container div 设置为溢出：自动，所以我希望它开始滚动。

问题：即使我有一个 div float:left 和一个 div float:right 都带有 display:inline-block，而父级带有 white-space:no wrap - wrap!!! 偶然我发现我可以通过将另一个 div 也包含在 display:inline-block 中来使其工作。为什么是这样？？？

下面是我的代码和一个工作 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 链接

4

2 回答 2

9

添加左、右、上、下边距的示例；多个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>

从这个讨论和另一个修改的代码。

于 2014-02-02T05:49:28.003 回答
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;
}
于 2013-05-19T19:37:00.423 回答