我正在尝试建立一个portifolio。对于图像div，我已经提到宽度为25％，位置：固定，以下内容div有margin-left：25％但不确定为什么两个div之间的差距很大
PS：在codepen链接上可以看到空格
检查以下代码段和代码集引用portifolio
这里几乎没有问题
请帮忙
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>
答案 0 :(得分：1)
Waaay代码太多了，而且我也不确定我理解你的问题。但是如果左列与图像和你的内容块之间的差距是问题：你的25％保证金看起来很好，那就是你的容器div以margin：auto为中心;这是造成它的。
答案 1 :(得分：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>