-1
jsfiddleの緑色のテキストボックスは、黄色のものに上に移動しません。どうすればこの問題を解決できますか？そして、どのようにしてボックスを「サイズ変更不可能」にするのですか。ウィンドウが再合成されると、どこにでも移動しません。 私はそれが中間のdivと関係があると思う、それにもっとタイプするとサイドボックスが下がるから。 私が試した..それはコメントであるべきtop: -20px;を、そしてposition: alternative/realative;しかし、彼らはちょうど私がjsfiddleへのリンクを追加can't私はDIVをどのように動かすのですか？ウィンドウがリサイズされたときに移動しないようにしてください。
を消えます。
.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