親divの左に子divを配置しますか？

Question

div内の見出しをイメージと重複させたいので、幅50％のイメージとdivのテキスト65％があります。しかし、問題は、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

をあなたはその使用フレキシボックスのような何かを試すことができます。

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％に2つのdivを作ると、情報を投影するパディングを与えるドント？ のdivここ

*{ 
    box-sizing:border-box; 
} 

の内側に正しくパディングを行うためにあなたが結果

を持って、この属性が必要

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