-1
jsfiddle上的绿色文本框不会向上移动到黄色的..我该如何解决这个问题？我如何使这些盒子“不可修复”，所以当窗口被重新调整时，它们不会开始到处走动。 我认为它与中间div有关，因为当我输入更多内容时，边框变暗。 我想：top: -20px;，并且position: alternative/realative;但他们只是dissapear我如何移动我的DIV？并让他们，所以他们不会移动窗口时调整大小
我不能将链接添加到的jsfiddle ..它应该在的意见。
.container {
max-width: 770px;
margin: auto;
margin-top: 15px;
overflow: hidden;
}
.left, .right, .middle {
float: left;
overflow: hidden;
border-radius: 3px;
margin-right: 10px;
position: initial;
}
.right {
margin-right: 0px;
float:right;
position: initial;
}
.left-header, .right-header, .middle-header {
background: #58C5B3;
font-size: 10px;
padding: 15px;
color: #FFFFFF;
text-transform: uppercase;
position: initial;
}
.middle{
width: 500px;
position: initial;
}
.left-text, .right-text, .middle-text {
background: #FFFFFF;
padding: 5px;
font-size: 15px;
position: initial;
}
ul {
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
\t overflow: hidden;
\t background-color:#55A7DB;
\t color:black;
\t line-height:22px;
\t margin-left:auto;
\t margin-right: auto;
\t text-align:center;
\t vertical-align:middle;
\t border-radius: .2em;
\t width: 780px;
\t height: 42px;
border-right: .2em;
}
\t \t \t li {
\t \t \t \t float: left;
\t \t \t }
\t \t \t li a {
\t \t \t \t display: block;
\t \t \t \t color: white;
\t \t \t \t text-align: center;
\t \t \t \t padding: 010px 16px;
\t \t \t \t text-decoration: none;
\t \t \t \t font-size: 10px;
\t \t \t }
\t \t \t li a:hover {
\t \t \t \t background-color: #58c5b3;
\t \t \t \t margin: 0;
\t \t \t \t color:#fff;}
\t \t \t
\t \t \t a:link {
\t \t \t \t color: white;
\t \t \t \t text-decoration: none;
\t \t \t \t font-family: 'Roboto', sans-serif;
\t \t \t }
\t \t \t a:hover {
\t \t \t \t color: #ffffff;
\t \t \t }
\t \t \t a:visited {
\t \t \t \t color: white;
\t \t \t \t text-decoration: none;
\t \t \t \t font-family: 'Roboto', sans-serif;
\t \t \t }
\t \t \t .design{
\t \t \t \t padding: 3px;
\t \t \t \t padding-top: 3px;
\t \t \t padding-right: 3px;
\t \t \t padding-bottom: 3px;
\t \t \t padding-left: 3px;
\t \t \t background-color: #ffffff;
\t \t \t border: 1px solid #c2c2c2;
\t \t \t border-radius: 5px;
\t \t \t position: relative;
}
.pluss{color:#7dc3b7;}
.minus{color:#c5618b;}
.space{height:20px;}
<body>
<div class="container">
<ul>
<li> <a href="#"><i class="fa fa-home" aria-hidden="true"></i>
HOME</a></li>
<li> <a href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i>
NEWS</a></li>
<li> <a href="#"><i class="fa fa-users" aria-hidden="true"></i>
ADMINS</a></li>
<li style="float:right"> <a href="#"><i class="fa fa-sign-in" aria-hidden="true"></i>
LOGIN</a></li></ul>
<br>
<!-- LEFT -->
<div class="left" style="width: 25%">
<div class="left-header">
updates<i style="float:right;" class="fa fa-refresh fa-lg" aria-hidden="true"></i>
</div>
<div class="left-text">
<!-- -->
<div class="minus"></div>
<div class="pluss">+ Added:<br>+ Added:<br><div class="minus">- Removed:<br>- Removed</div></div>
</div>
</div>
<!-- /// left-->
<!-- MIDDLE -->
<div class="middle" style="width: 47%">
<div class="middle-header" style="background-color: #ce5b5b">
Welcome to (servername)!<i style="float:right;" class="fa fa-home fa-lg" aria-hidden="true"></i>
</div>
<div class="middle-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.<p>
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
<!-- /// middle-->
<!-- RIGHT -->
<div class="right" style="width: 25%;">
<div class="right-header" style="background-color: #e3c155 ">
login<i style="float:right;" class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
</div>
<div class="right-text">
<!-- -->You can have your own text in this box.
</div>
</div>
<br><p>
<!-- ///right-->
<!-- left- secound row -->
<div class="left" style="width: 25%;">
<div class="left-header" style="background-color: #55A7DB">
INSERT TEXT<i style="float:right;" class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
</div>
<div class="left-text">
<!-- -->You can have your own text in this box.
</div>
</div>
<!-- ///left -seound row-->
<!-- RIGHT - secound row -->
<div class="right" style="width: 25%;">
<div class="right-header" style="background-color: # ">
insert text<i style="float:right;" class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
</div>
<div class="right-text">
<!-- --> THIS TEXTBOX, (LIKE EVERYONE) WONT GO TO THE TOP, UNDER THE YELLOW ONE.
</div>
</div>
<br><p>
<!-- ///right - secound row-->
</body>
https://jsfiddle.net/etmLur9z/3/ – Simon
这可能是一个很好的解决方案吗？ http://stackoverflow.com/questions/12351432/grid-layout-ul-of-divs-with-different-sizes – Hespen