html - 输入破坏了 Div 定位

Question

我在为我正在设计的网站实现布局时遇到问题。

页面顶部有三个蓝色 div，我在其下放置了四个红色 div。每个红色 div 将占据不到页面宽度的四分之一。

在最右边的蓝色 div 中放置一个输入字段后，红色 div 的位置向右移动，一些红色 div 出现在其他 div 的下方。

我试过更改各种 div 的位置属性，但似乎无法恢复我想要的布局，并尝试添加边距但无济于事。

任何人都可以看到我的代码和/或布局中的问题吗？任何帮助将不胜感激，我已将所有代码包含在 JSfiddle 页面中。

非常感谢。

http://jsfiddle.net/4cb5za9y/

enter code here<style type="text/css">

Answer 1

只有一个 </div>输入后丢失，这破坏了布局。 Here's the updated fiddle .