상위 div의 왼쪽에 하위 div를 배치 하시겠습니까?

Question

I은 ​​50 %의 폭 I는 화상 중첩 사업부 내부 호를 원하기 때문에 65 % 인 텍스트와 DIV있는 이미지를 갖는다. 그러나 문제는 div 내의 다른 내용이 이미지와 겹치는 것을 원하지 않는다는 것입니다. 텍스트와 버튼을 이미지 위에 놓지 말고 텍스트 위에 놓기를 원합니다. 그러나 나는 그것을 알아낼 수 없습니다.

는 여기 Codepen입니다 : https://codepen.io/tayanderson/pen/EbJZxy

.project { 
    height: 75vh; 
    margin: 15em 0; 
    position: relative; 

    .project-info { 
     z-index: 100; 
     display: flex; 
     flex-direction: column; 
     justify-content: center; 
     position: absolute; 
     width: 65%; 
     height: 100%; 
     right: 0; 
     h2 { 
      text-transform: initial; 
      color: #eee; 
     } 
     p { 
      font-weight: 300; 
      color: #ccc; 
      margin: 40px 0; 
     } 
     .project-desc { 
      width: 70%; 
      .button {display:inline-block;} 
     } 
    } 

    .project-img { 
     background-size: cover; 
     background-position: center; 
     height: 100%; 
     -webkit-filter: grayscale(100%) brightness(50%); 
     filter: grayscale(100%) brightness(50%); 
     width: 51.3%; 
    } 

    a {text-decoration:none; 
     color: #fff;} 
    @media only screen and (max-width: 768px) { 
     .project-info, .project-img { 
      width: 100%; 
     } 
     .project-info { 
      left: 0; 
      padding: 0 20px; 
      .project-desc>*{ 
       width: 100% !important; 
       float: left !important; 
      } 
      p {display: none;} 
     } 
    } 
} 

Answer 1

나는 당신이 설명하는 내용을 이해하기 생각합니다. 대신 항목을 배치하는 백분율을 사용하여 position : relative를 사용하고 이미지를 플로팅하십시오 (플로트에 먼저 넣어야 함).

에 체크를 아웃 : https://codepen.io/alexplummer/pen/eeoRmN

.project-info { 
    display: inline-block; 
    width: calc(50% - 10px); 
    height: 100%; 
    padding-left: 10px; 
    ... 
} 
.project-img { 
    width: 50%; 
    float: left; 
    ... 
} 

Answer 2

당신은 그 사용 인 flexbox 뭔가를 시도 할 수 있습니다.

https://codepen.io/dakata911/pen/BmEpeB

.article { 
    width: 60%; 
    margin: 0 auto; 
    display: flex; 
} 

.article__image, 
.article__text { 
    width: 50%; 
} 

.article__image { 
    background: url('http://www.country1067.com/wp-content/uploads/sites/28/2017/07/logoImage_4.jpg') center center no-repeat; 
    background-size: cover 
} 

.article__text { 
    padding: 12px; 
    background: #c3c3c3; 
} 

.article__text h2 { 
    margin-left: -96px; 
    color: #FFF; 
    font-size: 40px; 
} 

Answer 3

는 왜 50 %로 두 개의 div를 만들 및 프로젝트 정보를 위해 패딩을 제공하지는? 사업부 여기

*{ 
    box-sizing:border-box; 
} 

내부에 제대로 패딩을 당신은 당신이 결과

이이 속성을 필요

https://codepen.io/marcosefrem/pen/BmERmY