如何让三个div左浮动或右浮动并且它们之间没有空白间隔？

Question

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

• 一个自动调整大小并向左对齐的div，包含菜单
• 一个向右对齐且定义了大小（例如100像素）的div，包含标志
• 一个自动调整大小的div，包含一个应该粘在左侧和右侧div上的input[type="text"]

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

这里是我需要的示意图：

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

你有想法怎么做吗？提前感谢。

- Xavier C.

---

将它们全部向左浮动，放入一个所需总宽度的容器中。在http://jsfiddle.net/上尝试并发布链接，我们会得到一个想法并根据需要进行编辑。 - Nagendra Rao

请查看这个 JSFiddle：http://jsfiddle.net/vytM3/4/，这是你想要的吗？ - Ali Çarıkçıoğlu

只是为了确认，父容器有固定的宽度吗？ - 0x6563

试一下这个：http://jsfiddle.net/hBcsQ/1/ - Ross Allen

想要了解有关浮点数和列布局的更多信息，请查看http://www.positioniseverything.net/articles/onetruelayout/。该文章于2005年撰写，但自那以来浮动布局并没有改变。 - Ross Allen

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

- Ross Allen

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

- Ali Çarıkçıoğlu

---

它并不是。OP没有要求三列布局。有一些条件应该被触发。 - Hashem Qolami

Hashem，抱歉我不明白你的问题。 - Ali Çarıkçıoğlu

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

- j08691

---

哇！我写的代码和你的几乎一模一样。不过我在中间元素上加了 overflow::hidden，这样它只会占据左右浮动元素之间的宽度，而不是整个容器的宽度。 - Ross Allen

@ssorallen - 不确定是否需要，但这取决于原帖中的实际代码。他似乎正在指定一个高度，可以根据需要进行调整，而overflow:hidden可能会截断他不想隐藏的内容。 - j08691

@j08691 他要求列不重叠，其中两个具有动态的width，另一个具有固定的宽度。 - Hashem Qolami

右浮动应该首先出现在HTML中。 - Scott

@j08691 说得好，虽然在中心 div 上添加左/右填充似乎不能正常工作，因为它将是其容器的完整宽度。使其成为它看起来的宽度似乎是预期的行为。 - Ross Allen

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

- Scott