Question

我的导航栏（例如940px）包含3个div：

一个左对齐（自动调整大小）包含一个菜单
一个右对齐（定义尺寸，例如100px），包含徽标
一个（自动调整大小），包含一个应该坚持左右div的输入[type =“text”]

每个div都有不同的背景/不透明度，它们之间不能有重叠。

他是我需要的图画：

+------------------+-------------------------------------------+-----------------+
|       MENU       |      INPUT TYPE TEXT (width: 100%)        |       LOGO      |
+------------------+-------------------------------------------+-----------------+

你对如何做到这一点有所了解吗？提前谢谢。

Answer 1

不要漂浮中心<div>。如果将其移动到浮动元素下方，它将位于浮动元素之间。将overflow: hidden添加到中间元素会阻止它在浮动元素下面流动。

您示例中的HTML：

<div class="container">
  <div class="left">menu1 menu2 menu3</div>
  <div class="right">right</div>
  <div class="center">
    <input type="text" class="form-control" />
  </div>
</div>

和CSS：

.container {
  width: 400px;
  height: 100px;
  background-color: red;
}

.left {
  height: 100px;
  background: green;
  float: left;
}

.center {
  height: 500px;
  background: blue;
  overflow: hidden;
}

.right {
  width: 50px;
  height: 100px;
  background: yellow;
  float: right;
}

Answer 2

check this fiddle我制作了3个div和1个容器。希望它有所帮助。

body
{
    margin: 0px;
    padding: 0px;
}

.container
{
    width: 100%;
    height: 200px;
}

.left
{
    width: 50px;
    height: 200px;
    background: green;
    float: left;
}

.center
{
    width: 68%;
    height: 200px;
    background: blue;
    float: left;

}

.right
{
    width: 50px;
    height: 200px;
    background: yellow;
    float: left;
}

Answer 3

重新排列HTML，使元素按此顺序排列：

<div class="container">
    <div class="left">menu1 menu2 menu3</div>
    <div class="right">right</div>
    <div class="center">
        <input type="text" class="form-control" />
    </div>
</div>

然后使用这个CSS：

.container {
    width: 400px;
    height: 100px;
    background-color: red;   
}
.left {
    height: 100px;
    background: green;
    float: left;
}
.center {
    height: 100px;
    background: blue;
}
.right {
    width: 50px;
    height: 100px;
    background: yellow;
    float: right;
}

<强> jsFiddle example

Answer 4

将您想要的项目在右侧移动到HTML中的第一个位置：

<div class="wrap">
  <div class="r">Logo</div>
  <div class="l">Menu</div>
  <div class="c">Center content</div>
</div>

然后就是CSS：

.wrap { background: #ddd; margin: 10px; }
.wrap > div { padding: 10px;}
.r { float: right; background: #aaa; width: 100px; }
.l { float: left; background: #eee; width: 100px; }
.c { text-align: center; }

DEMO HERE

如何浮动（左/右）3个div而它们之间没有空格？

4 个答案: