float를 사용하는 반응 형 CSS의 추가 공간 : 왼쪽;

Question

내 인생에서이 코드가 작동하지 않는 이유를 알 수 없습니다. 개인 웹 사이트를 설정하려고하는데 컨텐츠를 설치하기 전에 모든 영역을 설정하고 반응 형으로하고 싶습니다. 내 작업 (div id = container)을 표시 할 수있는 상자의 3x3 표를 원하지만, 9 번째 div 블록 (p9)을 도입 할 때마다 정렬이 겉으로보기에는 아무 이유없이 중단됩니다. 다음은 바탕 화면 레이아웃의 코드는 다음과 같습니다

body{ 
    background-color:#FFB51E; 
    width:100%; 
    height:1000px; 
    position:absolute; 
} 

/* unvisited link */ 
a:link { 
    text-decoration:none; 
    background-color: #2A56C4; 
    color:#fff; 
    padding:15px; 
    border-radius:26px; 
    } 
/* visited link */ 
a:visited { 
    color: fff; 
    } 
/* mouse over link */ 
a:hover { 
    background-color:#FF581E; 
    } 
/* selected link */ 
a:active { 
    color:#FF581E; 
    background-color:fff; 
    } 

#header{ 
    width:80%; 
    height:160px; 
    margin: 0 auto; 
    position:relative; 
    display:block; 

} 

.left{ 
    color:#fff; 
    text-align: left; 
    margin-top:25px; 
    margin-bottom:15px; 
    font-size:36px; 
    position:relative; 
    float:left; 
    width:310px; 
    display:block; 
} 

.right{ 
    text-align:right; 
    width:300px; 
    float:right; 
    padding-top:5px; 
    margin-bottom:15px; 
    font-size:24px; 
    position:relative; 
    float:right; 
    z-index:2; 
} 

.works{ 
    text-align:center; 
    position:relative; 
    float:left; 
    left:30%; 
    font-size:25px; 
    width:100px; 
    display:inline-block; 
} 

.about{ 
    text-align:center; 
    position:relative; 
    float:right; 
    right:30%; 
    font-size:25px; 
    width:100px; 
    display:inline-block; 
} 

.border{ 
    background-color:none; 
    width:100%; 
    height:85px; 
    margin:0 auto; 
    border:none; 
    border-bottom: 6px solid #000; 
    float:none; 
    position:relative; 
} 
/*body stuff*/ 
    #container{ 
    position:static; 
    display:block; 
    margin:0 auto; 
    font-size:0px; 
    margin-top: -10px; 
    width:80%; 
    height:550px; 
} 

    .p1{ 
     background-color: aliceblue; 
     color:000; 
     font-size:12px; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin: 0px; 
     padding:0px; 

    } 

    .p2{ 
     background-color: red; 
     width:230px; 
     z-index: 1; 
     float:left; 
     padding:0px; 
    } 
    .p3{ 
     background-color: blue; 
     width:230px; 
     z-index: 1; 
     float:left; 
     padding:0px; 
     margin:0px; 
    } 

    .p4{ 
     background-color: purple; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin-top: 20px; 
     padding:0px; 

    } 

    .p5{ 
     background-color: green; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin-top: 20px; 
     padding:0px; 
    } 
    .p6{ 
     background-color: brown; 
     width:230px; 
     z-index: 1; 
     float:left; 
     padding:0px; 
     margin-top: 20px; 
    } 

    .p7{ 
     background-color: purple; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin-top: 20px; 
     padding:0px; 

    } 

    .p8{ 
     background-color: green; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin-top: 20px; 
     padding:0px; 
    } 
    .p9{ 
     background-color: green; 
     width:230px; 
     z-index: 1; 
     float:left; 
     margin-top: 20px; 
     padding:0px; 
    } 

나는 창문을 내 노트북을 발로 드롭에서 약 5 분 해요, 그래서 도움의 종류는 크게 감사하겠습니다! html에 대한 코드가 필요한지 알려주십시오.

Answer 1

시작해야 할 것이 있습니다. 당신이 사용하는 HTML이 없어 컨테이너에 집중했습니다. 필자는 반응 형으로 만드는 플렉스 박스로 정의했습니다. 각 항목의 너비는 33 %이고 높이는 30px입니다 (데모 용). 먼저

/*body stuff*/ 
 

 
#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    margin: 0 auto; 
 
    margin-top: -10px; 
 
    width: 80%; 
 
} 
 

 
[class^="p"] { 
 
    width: 33%; 
 
    height: 30px; 
 
} 
 

 
.p1 { 
 
    background-color: aliceblue; 
 
} 
 

 
.p2 { 
 
    background-color: red; 
 
} 
 

 
.p3 { 
 
    background-color: blue; 
 
} 
 

 
.p4 { 
 
    background-color: purple; 
 
} 
 

 
.p5 { 
 
    background-color: green; 
 
} 
 

 
.p6 { 
 
    background-color: brown; 
 
} 
 

 
.p7 { 
 
    background-color: yellow; 
 
} 
 

 
.p8 { 
 
    background-color: red; 
 
} 
 

 
.p9 { 
 
    background-color: green; 
 
}

<div id="container"> 
 
    <div class="p1"></div> 
 
    <div class="p2"></div> 
 
    <div class="p3"></div> 
 
    <div class="p4"></div> 
 
    <div class="p5"></div> 
 
    <div class="p6"></div> 
 
    <div class="p7"></div> 
 
    <div class="p8"></div> 
 
    <div class="p9"></div> 
 
</div>

Answer 2

: 난 그냥 바닥에이 CSS 규칙을 추가 (다른 규칙을 덮어) 지금은 원하는대로 작동합니다

#container > div { 
    width: 230px; 
    margin-top: 20px; 
} 

https://jsfiddle.net/bhzw7o60/1/

둘째 : 공통 매개 변수가있는 요소의 경우 (모두 같은 너비, 크기 및 여백을 가진 부동 요소처럼) op)를 사용하려면 모든 클래스에 * common * 클래스를 사용해야하며 다른 속성 만 포함하는 개별 요소에 대해 별도의 클래스를 사용해야합니다. 위의 규칙은 width 및 margin-top에 대해이 작업을 수행합니다. height을 추가하고 개별 클래스에 background-color 만 정의 할 수도 있습니다. BTW : z-index이 경우 아무 작업도 수행하지 않으므로 모든 규칙에서 삭제할 수 있습니다.