방지 CSS는 <a href="https://i.stack.imgur.com/yMOAa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yMOAa.png" alt="enter image description here"></a></p> <p>그러나 (그림 참조) 내가 전체 모드에서 내 창을 때

Question

들이 정상적인 보면 폭 때의 작은 화면에 : 그것은 긴 모양된다

. 나는 그저 사각형을 유지하고 형태를 바꾸지 않기를 원합니다.

내 HTML과 CSS :

<div id="logo"> 
<img src="http://i.cubeupload.com/jmdKlW.png"/> 
</div> 
<div id="title"> 
<h3>Who's watching</h3> 
</div> 
<div class="divOuter"> 
<div class="divInner1">First DIV</div> 
<div class="divInner2">Second DIV</div> 
<div class="divInner3">Third DIV</div> 
<div class="divInner4">Third DIV</div> 

</div> 
<div class="divOuter"> 
<div class="divInner5">Desseh</div> 
<div class="divInner6">Anna</div> 
<div class="divInner7">Sia</div> 
<div class="divInner8">Lucas</div> 
</div> 

CSS :

.divOuter { 
    width: 50%; 
    margin: 0 auto; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.divInner1, 
.divInner2, 
.divInner3, 
.divInner4 { 
    border: .3em solid rgba(0,0,0,.4); 
    width: 150px; 
    height: auto; 
    margin-left: 3px; 
    margin-right: 3px; 
    margin-top: 50px; 
    text-align: center; 
    display: inline-block; 
    flex:1;} 

.divInner1 { 
    background:grey; 
} 
.divInner2 { 
    background:grey; 
} 
.divInner3 { 
    background:grey; 
} 
.divInner4 { 
    background:grey; 
} 

    .divInner1:hover { 
    border: .3em solid white; 
} 
    .divInner2:hover { 
    border: .3em solid white; 
} 
    .divInner3:hover { 
    border: .3em solid white; 
} 
    .divInner4:hover { 
    border: .3em solid white; 
} 


.divInner5, 
.divInner6, 
.divInner7, 
.divInner8 { 
    margin-left: 3px; 
    margin-right: 3px; 
    margin-top: 20px; 
    text-align: center; 
    display: inline-block; 
    flex:1; 
    color:grey; 
    font-size: 24px; 

동작하는 예제가 xat.me/madses1996에서 찾을 수 있습니까? 저는 이것이 플렉스를 사용하여 물건을 중심에 배치한다는 사실과 관련이 있다고 생각합니다. 이런 식으로 할 수있는 방법이 있나요?하지만 브라우저를 축소하면 정사각형으로 유지됩니까?

나는 개별적으로

Answer 1

옵션이 그들에 플렉스 속성이 당신의 div의 내부에 사람을 배치하는 것입니다 상자를 편집하는 것 캔트.

.stay-square { height:150px; width:150px; } 

당신은 항상뿐만 아니라 화면의 크기에 따라 스타일을 조정 @media 사용할 수 있습니다 높이와 폭이 동일하도록

<div class="divOuter"> 
    <div class="divInner1"><div class="stay-square">First DIV</div></div> 
    <div class="divInner2"><div class="stay-square">Second DIV</div></div> 
    <div class="divInner3"><div class="stay-square">Third DIV</div></div> 
    <div class="divInner4"><div class="stay-square">Third DIV</div></div> 
</div> 

그들에 대한 스타일을 설정합니다.

또한 내부 DIV에 외부 DIV에서 스타일링들을 전송 :

.divInner1, 
.divInner2, 
.divInner3, 
.divInner4 { 
    text-align: center; 
    display: inline-block; 
    flex:1; 
} 

은 (I는 외부 된 div에서 배경 스타일을 제거하고, 내부 DIV에 배치) 할

.stay-square { 
    width:150px; 
    height:150px; 
    border: .3em solid rgba(0,0,0,.4); 
    margin-left: 3px; 
    margin-right: 3px; 
    margin-top: 50px; 
    background:grey; 
}