래퍼 div 내부의 Divs가 올바르게 정렬되지 않았습니다.

내 래퍼 div의 내부에 내 사이드 바를 가져올 수없는 이유를 알아야합니다. 래퍼 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>

감사합니다.

출처

2016-10-14 Guren

제거 위치 : 절대 아래에서와 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; 
}

출처

2016-10-14 04:01:39

감사합니다. 이것은 효과가있다! 실제로 몇 픽셀을 남겨 두어야한다는 것을 알았습니다. 내 문제는 정확한 계산을하고 있다는 것이 었습니다. – Guren

시도 flexbox 그것이 작동하는 방법을 발견하기위한 멋진 도구가 있습니다. here, 그리고 그것은 CSS 레이아웃과 관련된 nastiness를 완전히 제거합니다.

출처

2016-10-14 03:57:13

감사합니다! – Guren

래퍼 div 내부의 Divs가 올바르게 정렬되지 않았습니다.

답변

관련 문제