CSS Divs를 올바르게 맞 춥니 다.

Question

두 개의 큰 div가 있습니다. 하나는 메인 막대, 하나는 오른쪽의 세로 막대가됩니다. 나는 그것들을 모두 왼쪽으로 뜨게하려고 시도했다. 또한 폭 비율을 사용해 보았지만 알아 내지 못했다. 아마도 당신들은 할 수 있을까요?

.box { 
    background-color: rgba(224, 222, 217, 0.25); 
    -moz-box-shadow: 0 0 10px #1a1a18; 
    -webkit-box-shadow: 0 0 10px #1a1a18; 
    box-shadow: 0 0 10px #1a1a18; 
    border: 1px solid #ffffff; 
    margin-top:25px; 
} 
.container { 
margin-left: auto; 
margin-right: auto; 
float: left; 
width: 60%; 
padding: 20px; 
background-color: none; 
border: 1px solid #C9C7C8; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
min-height: 450px; 
} 
.sidebar { 
float: left; 
width: 20%; 
padding: 20px; 
background-color: none; 
border: 1px solid #C9C7C8; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
    margin-right:10px; 
min-height: 450px; 
} 
.boxsidebar { 
    background-color: rgba(224, 222, 217, 0.25); 
    -moz-box-shadow: 0 0 10px #1a1a18; 
    -webkit-box-shadow: 0 0 10px #1a1a18; 
    box-shadow: 0 0 10px #1a1a18; 
    border: 1px solid #ffffff; 
    margin-right:10px; 
} 

는 사람이 알아낼 수 있습니다 : 다음은 CSS가

<div class="container box" style="clear:both !important;"> 
</div> 
<div class="sidebar sidebarbox" style="clear:both !important;"> 
</div> 

: 이는 HTML 코드? 나는 정말로 도움을 감사 할 것이다.

Answer 1

플로팅을 덮어 쓰는 인라인 스타일링 (중요하게 설정)이 있습니다. 조금 정리 될 수

<div class="container box"> 
</div> 
<div class="sidebar sidebarbox"> 
</div> 
<div style="clear:both;"></div> 

귀하의 코드 ..하지만 위에서 서로 옆에 떠하지 상자의 문제를 해결할 수 :

는에 HTML을 설정합니다.

Answer 2

올바르게 이해하면 상자가 주 콘텐츠 컨테이너가되고 세로 막대가 상자 요소 오른쪽에 있어야합니다.

당신이 필요로하는 모든

은 이것이다 :

HTML

<div class="container box"> 
</div> 
<div class="sidebar sidebarbox"> 
</div> 

CSS

.box { 
background-color: rgba(224, 222, 217, 0.25); 
-moz-box-shadow: 0 0 10px #1a1a18; 
-webkit-box-shadow: 0 0 10px #1a1a18; 
box-shadow: 0 0 10px #1a1a18; 
border: 1px solid #ffffff; 
margin-right: 10px; 
} 
.container { 
float: left; 
width: 60%; 
padding: 20px; 
border: 1px solid #C9C7C8; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
min-height: 450px; 
} 
.sidebar { 
float: left; 
width: 20%; 
border: 1px solid #C9C7C8; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
min-height: 450px; 
} 
.boxsidebar { 
background-color: rgba(224, 222, 217, 0.25); 
-moz-box-shadow: 0 0 10px #1a1a18; 
-webkit-box-shadow: 0 0 10px #1a1a18; 
box-shadow: 0 0 10px #1a1a18; 
border: 1px solid #ffffff; 
} 

할 수 있습니다 쉐도우, 당신의 선택기가없는 그런 식으로 추가 일반적으로 클래스를 생성하여 더 깨끗한 코드 어수선하게.

희망이 도움이됩니다.