包裝div內的div未正確對齊
[英]Divs inside of wrapper div are not aligning properly
問題描述
我需要知道為什么我的側邊欄不能位於包裝器div的右側，而main_content div不能位於包裝器的左側。 我想要以下模型：
WRAPPER DIV:
______________________________
{ / sidebar }
{ / div }
{ m_c div / }
{ / }
{ __________________/__________}
1）我缺少什么代碼，使我無法在包裝器內對齊div？
2）另外，我在每個div周圍畫了一個邊框，以便可以輕松地對其進行可視化； 現在為什么我的main_content div每當遇到文本時就消失了？ 如果在小提琴中運行它，您會看到我在說什么。 文本附近的邊框中有孔； 我怎樣才能使它消失？
謝謝。
/*Comment example - created 10/12/16*/ * { font-family: 'Libre Franklin', sans-serif; background-color: rgb(155, 155, 155); } .wrapper { /*black*/ width:960px; min-height: 700px; border: 1px solid rgb(0,0,0); margin: 0 auto; display:inline-block; } .main_content{ /*Green*/ width: 730px; min-height: inherit; border: 2px solid rgb(222, 26, 26); float:left; } .sidebar_one{ /*White*/ width: 230px; min-height:inherit; border: 1px solid rgb(255,255,255); float:right; position:absolute; color:rgb(242, 70, 16); overflow:hidden; } h2 { position:relative; left:5px; } h5 { position:relative; left:5px; } p { position:relative; left:5px; }
<!DOCTYPE html> <!--Created 10/12/16 ///// ideas: emrisk--> <html> <link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet"> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> <!--Added external Stylesheet--> <script src="script.js"></script> <!--Added external javascript file--> </head> <body> <div class="wrapper"> <div class="main_content"> <h2>TEST </h2> <!-- END OF H2 --> <h5>random test standard of web-based and cloud-based server systems since 2007. </h5> <!-- END OF H5 --> <p> Our clients have trusted our team for almost a decade and throughout the years we have proven our worth over and over again. </p> <!-- END OF P --> </div> <!-- END OF MAIN_CONTENT --> <div class="sidebar_one"> Test </div> <!-- END OF SIDEBAR_ONE --> </div> <!-- END OF wrapper --> </body> </html>
謝謝。
2 個解決方案
解決方案2
0 已采納 2016-10-14 04:01:39
從下面移除位置：絕對，並減小sidebar_one的寬度：-
.sidebar_one{ /*White*/
width: 210px;
min-height:inherit;
border: 1px solid rgb(255,255,255);
float:right;
color:rgb(242, 70, 16);
overflow:hidden;
}
將一個div與居中的2個div對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.