固定要素の後ろにある要素のマージンを固定する方法

Question

私はportifolioを構築しようとしています。画像divの場合、幅を25％、位置はfixedと指定し、次のコンテンツdivは余白が残っていますが25％ですが、2つのdivの間にマージンが多い理由はわかりません

PS： codepenリンク

要素が位置する場合、次のスニペットとcodepen参照ここportifolio

いくつかの質問

1. を確認してください。それを与えられていない場合は、次の要素は、マージン左指定する必要があり、なぜ固定固定された要素NT

は

body { 
 
    font-family: 'Lato'; 
 
    font-size: 14px; 
 
    background: #f0f0f0; 
 
    color: #333333; 
 
} 
 
.container { 
 
    display: flex; 
 
    padding-top: 10px; 
 
} 
 
.details { 
 
    padding-top: 10px; 
 
    padding-left: 10px; 
 
    height: 100%; 
 
    margin-left: 25%; 
 
    width: 80%; 
 
    background: white; 
 
    border: 1px solid rgba(0, 0, 0, 0.125); 
 
} 
 
.description { 
 
    width: 100%; 
 
    margin-left: 10px; 
 
} 
 
.description .content { 
 
    border-top: 1px solid #e6e6e6; 
 
    padding-top: 10px; 
 
    margin-top: 10px; 
 
} 
 
.description .content ul { 
 
    list-style-type: none; 
 
} 
 
.description .content ul li { 
 
    display: inline-block; 
 
} 
 
.snapshot { 
 
    width: 25%; 
 
    text-align: center; 
 
    padding-top: 20px; 
 
    margin-left: 10px; 
 
    position: fixed; 
 
    left: 0; 
 
    box-sizing: border-box; 
 
    background: white; 
 
} 
 
.snapshot img { 
 
    width: 100%; 
 
} 
 
.snapshot .separator { 
 
    margin: 0; 
 
} 
 
.card-block { 
 
    padding: 0; 
 
    font-size: 12px; 
 
} 
 
.card-block address { 
 
    margin: 0; 
 
} 
 
.card-block section { 
 
    display: flex; 
 
    padding: 10px; 
 
} 
 
.card-block section span { 
 
    vertical-align: middle; 
 
} 
 
.card-block section .info { 
 
    color: #707070; 
 
} 
 
.card-block section .content { 
 
    padding-left: 10px; 
 
} 
 
.social-profiles a { 
 
    text-decoration: none; 
 
    outline: none; 
 
    margin-left: 10px; 
 
} 
 
.social-profiles a img { 
 
    outline: none; 
 
} 
 
.social-profiles a:hover { 
 
    text-decoration: none; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="fixed"> 
 
     <div class="card col-md-3 snapshot"> 
 
     <img class="card-img-top" src="http://www.ssbuicetalumni.com/wp-content/themes/sschem/demos/dummy_team.jpg"> 
 
     <h4> 
 
        abc-xyz 
 
       </h4> 
 
     <small> 
 
        Software Engineer-Front End 
 
       </small> 
 
     <hr/> 
 
     <div class="card-block"> 
 

 
      <address> 
 
         <section class="home-address"> 
 
          <span class="info"><i class="fa fa-map-marker" aria-hidden="true"></i></span> 
 
          <span class="content"> 
 
     abc def ghi,<br/>abc-13452</span> 
 
         </section> 
 

 
         <section class="contact"> 
 
          <span class="info"> <i class="fa fa-phone" aria-hidden="true"></i></span> 
 
          <span class="content">125-535-1999</span> 
 

 
         </section> 
 
         <section> 
 
          <span class="info"><i class="fa fa-envelope-o" aria-hidden="true"></i></span> 
 
          <span class="content">abc.86@gmail.com</span> 
 
         </section> 
 

 
        </address> 
 

 
     </div> 
 
     <hr class="separator" /> 
 
     <div class="social-profiles"> 
 
      <a href="i" target="_blank"> 
 
      <i class="fa fa-twitter " aria-hidden="true"></i> 
 
      </a> 
 
      <a href="" target="_blank"> 
 
      <i class="fa fa-facebook" aria-hidden="true"></i> 
 
      </a> 
 

 
      <a href="http://stackoverflow.com/users/6814719/geeky"> 
 
      <i class="fa fa-stack-overflow" aria-hidden="true"></i> 
 
      </a> 
 
      <a target="_blank" href=""> 
 
      <i class="fa fa-github" aria-hidden="true"></i> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="details"> 
 
     <h5>BACKGROUND</h5> 
 
     <hr/> 
 
     <section class="about resume-content" id="about"> 
 
     <header> 
 
      <i class="fa fa-id-card header-image" aria-hidden="true"></i> 
 

 
     </header> 
 

 
     <div class="description"> 
 
      <div class="header-info">ABOUT</div> 
 
      <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor sapien facilisis, auctor mauris id, iaculis ex. Integer metus nulla, lacinia non dignissim eget, elementum et leo. Quisque aliquet erat eget scelerisque lacinia. Integer hendrerit 
 
      lacus risus, id feugiat augue gravida at. Etiam accumsan vulputate justo sit amet suscipit. Donec interdum metus eget nulla rutrum vehicula. Duis imperdiet lorem orci, ac scelerisque augue facilisis nec. Etiam faucibus id sem a congue. Praesent 
 
      purus tortor, ullamcorper et eros sed, tristique ornare est. Aenean suscipit lectus eu sem congue, vel ultricies turpis suscipit. Donec pretium urna lorem, et eleifend neque tempor eu. Phasellus rhoncus, turpis tempus posuere tempor, libero 
 
      tortor vehicula libero, eget gravida erat quam eu ex. Curabitur egestas massa sed consequat laoreet. Aliquam ultricies imperdiet eleifend. Duis in erat ac risus sagittis consequat in auctor nisl. Ut et felis in purus vulputate vulputate at 
 
      eget arcu. Integer dignissim dolor eros, a iaculis lorem volutpat quis. Etiam diam sem, blandit vel varius at, pulvinar a nibh. Maecenas interdum condimentum diam eu maximus. Morbi egestas, nisi eu pellentesque luctus, enim magna aliquet urna, 
 
      et vehicula diam quam ut nisi. Phasellus justo felis, varius eget ornare a, placerat et nisi. Aenean non ligula a diam pharetra sollicitudin. Fusce sed erat vitae ante vestibulum pulvinar ac eu purus. In hendrerit id diam a vehicula. Phasellus 
 
      a ex aliquam, dignissim tortor eget, placerat felis. Mauris sed mi nec magna pulvinar rutrum sed in risus. Mauris quis vulputate lacus. Cras ornare id ex sed dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin libero 
 
      libero, porttitor et ultrices vel, sagittis eu nisl. Aliquam iaculis auctor neque quis porta. Integer tristique, metus eu pulvinar pulvinar, est ante vehicula risus, in sagittis metus lectus non purus. In laoreet dapibus eros, vel suscipit 
 
      ante suscipit ac. Quisque ultrices quis sem ut elementum. Suspendisse ullamcorper ac purus a maximus. Donec sollicitudin odio a pellentesque tempus. Nam sed nibh eu turpis ullamcorper tristique eu sit amet mi. Nam eu consectetur lectus, id 
 
      auctor arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse vitae volutpat leo, elementum vulputate nisl. Vestibulum urna sapien, dictum nec tempus a, vehicula quis orci. Phasellus imperdiet 
 
      quam quis vestibulum posuere. Proin posuere, lectus at finibus rhoncus, turpis quam hendrerit ipsum, quis egestas mauris tortor a nibh. Nulla condimentum massa commodo libero tempor, non ornare libero porta. Nulla eget scelerisque tortor, 
 
      in malesuada tortor. Suspendisse pharetra risus a tellus fermentum lacinia. Pellentesque in vehicula magna. Proin risus ipsum, condimentum et tortor vel, ultricies tristique tortor. Ut fringilla, nibh sed hendrerit tempor, arcu quam vulputate 
 
      sem, non rutrum dui augue accumsan felis. Nunc ut cursus odio. Morbi vitae eros maximus, convallis elit ut, elementum metus. Aenean posuere non urna ac elementum. In hac habitasse platea dictumst. Integer dictum eu ipsum sit amet mollis. Generated 
 
      5 para 
 

 
      </div>

Answer 1

これを試してみてください！それは働いている。

body { 
 
    font-family: 'Lato'; 
 
    font-size: 14px; 
 
    background: #f0f0f0; 
 
    color: #333333; 
 
} 
 
.container { 
 
    display: flex; 
 
    padding-top: 10px; 
 
    word-wrap: break-word; 
 
} 
 
.details { 
 
    padding: 1%; 
 
    height: auto; 
 
    width: 72%; 
 
    position:absolute; 
 
    right:0; 
 
    top:0; 
 
    background: white; 
 
    border: 1px solid rgba(0, 0, 0, .125); 
 
} 
 
.description { 
 
    width: 100%; 
 
} 
 
.description .content { 
 
    border-top: 1px solid #e6e6e6; 
 
    padding-top: 10px; 
 
    margin-top: 10px; 
 
} 
 
.description .content ul { 
 
    list-style-type: none; 
 
} 
 
.description .content ul li { 
 
    display: inline-block; 
 
} 
 
.snapshot { 
 
    width: 24%; 
 
    text-align: center; 
 
    padding:1%; 
 
    position: fixed; 
 
    left: 0; 
 
    top:0; 
 
    box-sizing: border-box; 
 
    background: white; 
 
} 
 
.snapshot img { 
 
    width: 100%; 
 
} 
 
.snapshot .separator { 
 
    margin: 0; 
 
} 
 
.card-block { 
 
    padding: 0; 
 
    font-size: 12px; 
 
} 
 
.card-block address { 
 
    margin: 0; 
 
} 
 
.card-block section { 
 
    display: flex; 
 
    padding: 10px; 
 
} 
 
.card-block section span { 
 
    vertical-align: middle; 
 
} 
 
.card-block section .info { 
 
    color: #707070; 
 
} 
 
.card-block section .content { 
 
    padding-left: 10px; 
 
} 
 
.social-profiles a { 
 
    text-decoration: none; 
 
    outline: none; 
 
    margin-left: 10px; 
 
} 
 
.social-profiles a img { 
 
    outline: none; 
 
} 
 
.social-profiles a:hover { 
 
    text-decoration: none; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="fixed"> 
 
     <div class="card col-md-3 snapshot"> 
 
     <img class="card-img-top" src="http://www.ssbuicetalumni.com/wp-content/themes/sschem/demos/dummy_team.jpg"> 
 
     <h4> 
 
        abc-xyz 
 
       </h4> 
 
     <small> 
 
        Software Engineer-Front End 
 
       </small> 
 
     <hr/> 
 
     <div class="card-block"> 
 

 
      <address> 
 
         <section class="home-address"> 
 
          <span class="info"><i class="fa fa-map-marker" aria-hidden="true"></i></span> 
 
          <span class="content"> 
 
     abc def ghi,<br/>abc-13452</span> 
 
         </section> 
 

 
         <section class="contact"> 
 
          <span class="info"> <i class="fa fa-phone" aria-hidden="true"></i></span> 
 
          <span class="content">125-535-1999</span> 
 

 
         </section> 
 
         <section> 
 
          <span class="info"><i class="fa fa-envelope-o" aria-hidden="true"></i></span> 
 
          <span class="content">abc.86@gmail.com</span> 
 
         </section> 
 

 
        </address> 
 

 
     </div> 
 
     <hr class="separator" /> 
 
     <div class="social-profiles"> 
 
      <a href="i" target="_blank"> 
 
      <i class="fa fa-twitter " aria-hidden="true"></i> 
 
      </a> 
 
      <a href="" target="_blank"> 
 
      <i class="fa fa-facebook" aria-hidden="true"></i> 
 
      </a> 
 

 
      <a href="http://stackoverflow.com/users/6814719/geeky"> 
 
      <i class="fa fa-stack-overflow" aria-hidden="true"></i> 
 
      </a> 
 
      <a target="_blank" href=""> 
 
      <i class="fa fa-github" aria-hidden="true"></i> 
 
      </a> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="details"> 
 
     <h5>BACKGROUND</h5> 
 
     <hr/> 
 
     <section class="about resume-content" id="about"> 
 
     <header> 
 
      <i class="fa fa-id-card header-image" aria-hidden="true"></i> 
 

 
     </header> 
 

 
     <div class="description"> 
 
      <div class="header-info">ABOUT</div> 
 
      <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor sapien facilisis, auctor mauris id, iaculis ex. Integer metus nulla, lacinia non dignissim eget, elementum et leo. Quisque aliquet erat eget scelerisque lacinia. Integer hendrerit 
 
      lacus risus, id feugiat augue gravida at. Etiam accumsan vulputate justo sit amet suscipit. Donec interdum metus eget nulla rutrum vehicula. Duis imperdiet lorem orci, ac scelerisque augue facilisis nec. Etiam faucibus id sem a congue. Praesent 
 
      purus tortor, ullamcorper et eros sed, tristique ornare est. Aenean suscipit lectus eu sem congue, vel ultricies turpis suscipit. Donec pretium urna lorem, et eleifend neque tempor eu. Phasellus rhoncus, turpis tempus posuere tempor, libero 
 
      tortor vehicula libero, eget gravida erat quam eu ex. Curabitur egestas massa sed consequat laoreet. Aliquam ultricies imperdiet eleifend. Duis in erat ac risus sagittis consequat in auctor nisl. Ut et felis in purus vulputate vulputate at 
 
      eget arcu. Integer dignissim dolor eros, a iaculis lorem volutpat quis. Etiam diam sem, blandit vel varius at, pulvinar a nibh. Maecenas interdum condimentum diam eu maximus. Morbi egestas, nisi eu pellentesque luctus, enim magna aliquet urna, 
 
      et vehicula diam quam ut nisi. Phasellus justo felis, varius eget ornare a, placerat et nisi. Aenean non ligula a diam pharetra sollicitudin. Fusce sed erat vitae ante vestibulum pulvinar ac eu purus. In hendrerit id diam a vehicula. Phasellus 
 
      a ex aliquam, dignissim tortor eget, placerat felis. Mauris sed mi nec magna pulvinar rutrum sed in risus. Mauris quis vulputate lacus. Cras ornare id ex sed dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin libero 
 
      libero, porttitor et ultrices vel, sagittis eu nisl. Aliquam iaculis auctor neque quis porta. Integer tristique, metus eu pulvinar pulvinar, est ante vehicula risus, in sagittis metus lectus non purus. In laoreet dapibus eros, vel suscipit 
 
      ante suscipit ac. Quisque ultrices quis sem ut elementum. Suspendisse ullamcorper ac purus a maximus. Donec sollicitudin odio a pellentesque tempus. Nam sed nibh eu turpis ullamcorper tristique eu sit amet mi. Nam eu consectetur lectus, id 
 
      auctor arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse vitae volutpat leo, elementum vulputate nisl. Vestibulum urna sapien, dictum nec tempus a, vehicula quis orci. Phasellus imperdiet 
 
      quam quis vestibulum posuere. Proin posuere, lectus at finibus rhoncus, turpis quam hendrerit ipsum, quis egestas mauris tortor a nibh. Nulla condimentum massa commodo libero tempor, non ornare libero porta. Nulla eget scelerisque tortor, 
 
      in malesuada tortor. Suspendisse pharetra risus a tellus fermentum lacinia. Pellentesque in vehicula magna. Proin risus ipsum, condimentum et tortor vel, ultricies tristique tortor. Ut fringilla, nibh sed hendrerit tempor, arcu quam vulputate 
 
      sem, non rutrum dui augue accumsan felis. Nunc ut cursus odio. Morbi vitae eros maximus, convallis elit ut, elementum metus. Aenean posuere non urna ac elementum. In hac habitasse platea dictumst. Integer dictum eu ipsum sit amet mollis. Generated 
 
      5 para 
 

 
      </div>

Answer 2

Waaayあまりにも多くのコードを助けてください、とも私はあなたの質問を理解していません。しかし、左の列とイメージの間のギャップとコンテンツブロックが問題になる場合は、25％のマージンが問題なく表示されます。それが原因です。