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

Question

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

• 一个左对齐（自动调整大小）包含一个菜单
• 一个右对齐（定义大小，例如 100 像素）包含一个徽标
• 一个（自动调整大小）包含一个应该坚持左右 div 的 input[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

检查这个小提琴我做了 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 示例

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

在这里演示