사이드 바이 사이드 박스를 이동하는 방법은 무엇입니까? 내가 시간 동안 노력하고

Question

이제이

을 어떻게 내가 그 약간 왼쪽에 상자를 이동하고,이 때문에 내가 제대로 중 위의 이미지를 넣을 수 없습니다 할 수 있습니다. 나는 계속 웹 사이트를 변형 시키거나 박스를 쌓아 놓았다 ... 나는 위치를 가지고 시도했다 : 절대적이고, 플로트로, 그리고 기본적으로 내가 아는 모든 것이지만, 나는 그것을 올바르게 얻지 못한다. 도와 주시겠습니까? 질문을 이해하지만 상자의 위치를 ​​

Answer 1

@snoof에 명시된 바와 같이, 이것은 flexbox로 해결할 수 있습니다. 그 css 트릭에 대한 가이드는 매우 유용합니다, 확실히 그것을 읽으십시오.

레이아웃을 만들려고했는데 잘하면이 문제를 해결하는 방법을 이해하는 데 도움이됩니다. 경고,이 코드는 꽤되지 않습니다.

https://codepen.io/anon/pen/RjLVWE

HTML :

<div class="wrapper"> 
    <div class="left"> 
     <div id="circle-1" class="circle"> 
      <div class="circle-inner"></div> 
     </div> 
     <div id="box-1" class="box"> 
      <div class="box-inner"></div> 
     </div> 
    </div> 
    <div class="right"> 
     <div id="box-2" class="box"> 
      <div class="box-inner"></div> 
     </div> 
     <div id="circle-2" class="circle"> 
      <div class="circle-inner"></div> 
     </div> 
     <div id="box-3" class="box"> 
      <div class="box-inner"></div> 
     </div> 
    </div> 
</div> 

CSS :

.wrapper, 
.left, 
.right { 
    display: flex; 
} 

.left, 
.right { 
    position: relative; 
} 

.left { 
    width: 20%; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start; 
} 

.right { 
    width: 80%; 
    flex-wrap: wrap; 
    flex-basis: auto; 
} 

.box, 
.circle { 
    padding: 1em; 
} 

.box { 
    flex-grow: 1; 
} 

.box-inner { 
    background-color: #000; 
} 

.circle-inner { 
    padding: 7em; 
    background-color: #aaa; 
    border-radius: 100%; 
} 

#box-1 { 
    width: 100%; 
    height: 100%; 
} 

#circle-2 { 
    align-self: flex-end; 
} 

#box-1 .box-inner { 
    width: 100%; 
    height: 100%; 
} 

#box-2 .box-inner { 
    padding: 10em; 
} 

#box-3 { 
    width: 100%; 
} 

#box-3 .box-inner { 
    padding: 20em; 
} 

Answer 2

확실하지, 당신은 또한 인 flexbox를 사용할 수 있습니다

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

사용하고 반응 디자인을 유지하는 것이 정말 쉬운

.