私はportifolioを構築しようとしています。画像divの場合、幅を25%、位置はfixedと指定し、次のコンテンツdivは余白が残っていますが25%ですが、2つのdivの間にマージンが多い理由はわかりません固定要素の後ろにある要素のマージンを固定する方法
PS: codepenリンク
要素が位置する場合、次のスニペットとcodepen参照ここportifolio
いくつかの質問
- を確認してください。それを与えられていない場合は、次の要素は、マージン左指定する必要があり、なぜ固定固定された要素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">[email protected]</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>
あなたが要素 'ポジション与える :fixed'または'位置:あなたはDOMの流れのうちの要素を取るので、あなたはのmargin-leftを指定する必要がabsolute'、固定要素の外側または外側に配置する要素を配置します。 マージンについては、 '.details'の' margin-left'を '25%'ではなく '20%'に設定するだけです。 – junkfoodjunkie
私は絶対的なものが流れから要素を取り去ったと思った?私は決して固定しないので、間違っている可能性があります。 –
@junkfoodjunkie:20%にするべき理由...理想的には位置の幅:固定の要素でなければならない – Srisa