Question

jsfiddle上的绿色文本框不会向上移动到黄色..我该如何解决这个问题？我如何使盒子“不可分割”，所以当窗口被取消时它们不会开始到处走。我认为它与中间div有关，因为当我输入更多内容时，侧边框会下降。我尝试过：top: -20px;和position: alternative / realative;但他们只是消失了

我无法将链接添加到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 {
            	list-style-type: none;
            	margin: 0;
            	padding: 0;
            	overflow: hidden;
            	background-color:#55A7DB;
            	color:black;
            	line-height:22px;
            	margin-left:auto;
            	margin-right: auto;
            	text-align:center;
            	vertical-align:middle;
            	border-radius: .2em;
            	width: 780px;
            	height: 42px;
                border-right: .2em;
            }

			li {
				float: left;
			}
			li a {
				display: block;
				color: white;
				text-align: center;
				padding: 010px 16px;
				text-decoration: none;
				font-size: 10px;
			}
			li a:hover {
				background-color: #58c5b3;
				margin: 0;
				color:#fff;}
			
			a:link {
				color: white;
				text-decoration: none;
				font-family: 'Roboto', sans-serif;
			}
			a:hover {
				color: #ffffff;
			}
			a:visited {
				color: white;
				text-decoration: none;
				font-family: 'Roboto', sans-serif;
			}
			.design{
				padding: 3px;
  				  padding-top: 3px;
    			padding-right: 3px;
    			padding-bottom: 3px;
    			padding-left: 3px;
    			background-color: #ffffff;
    			border: 1px solid #c2c2c2;
    			border-radius: 5px;
    			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>

Answer 1

尝试将所有左侧div放在一个左侧容器内，并将其放在中间和右侧，当您执行此操作时，所有方框将在彼此下方显示，而在小提琴之间没有空格。
如果你想阻止它们调整大小，你必须给它们一个固定的宽度而不是百分比，或者用max-width给出它们的百分比：xxpx;

我如何移动我的DIV？并使它们在窗口调整大小时不会移动

1 个答案: