2016-10-14 6 views
0

私のラッパーの左側にあるために私のラッパーdivの内側と私のmain_content div内に私のサイドバーを入れることができない理由を知る必要があります。 は、私は次のモデルをしたいと思います:ラッパーdiv内のDivsが正しく整列していません

 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>

ありがとうございます。

答えて

0

位置取り除く:以下から絶対にして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; 
} 
+0

ありがとう!これはうまくいった!私はあなたが実際にいくつかのピクセルを残す必要があることを知った。私の問題は正確な計算をしていたことでした。 – Guren

0

Try flexboxどのように動作するのかを発見する素晴らしいツールがあります。here、それはCSSレイアウトに伴う不快感を完全に排除します。

+0

感謝を! – Guren

関連する問題