1
Im пытается построить portifolio. Для изображения div я упомянул ширину как 25%, а положение: фиксированное, а следующий контент div имеет margin-left: 25%, но не уверен, почему маржа является лотом между двумя div'sКак исправить маркер элемента, который появляется после фиксированного элемента
PS: Пространство больше видно на codepen ссылка
проверка следующий фрагмент и 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">[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' или' позиции: absolute' взять элемент из потока DOM, и поэтому вы должны определить запас слева, или иначе позиционировать элемент, который вы хотите иметь вне/рядом с фиксированным элементом. Что касается поля, просто установите 'margin-left' на' .details' на '20%' вместо '25%'. – junkfoodjunkie
Я думал, что только абсолют взял элемент из потока? Я никогда не использую фиксированные, поэтому я могу ошибаться. –
@junkfoodjunkie: Почему это должно быть 20%. Не должно быть идеальной ширины позиции: фиксированный элемент – Srisa