1
는 I 단락의 시리즈로, 콘텐츠 상자 (#left-home-content)을 가지며, 끝에서, I은 박스의 바닥에서 절대 위치 할 다음 A A <span> (.read-more-link)에 링크하고 <div> (#left-home-spread). 그렇게 쉬운 일입니다. 그 속임수는이 문단을 감싸고 싶습니다. <div>.절대 배치 된 요소 주위를 플로팅/래핑 하시겠습니까?
/* @group Left upper home content */
#left-home-content-container {
background-image: url(/dev/images/bg-primary-content.png);
height: 273px;
padding-top: 30px;
margin-top: -15px;
margin-left: 31px;
position: relative;
float: left;
}
#left-home-content {
width: 590px;
height: 240px;
}
#left-home-content h3 {
font: normal 20px/1.2 AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
color: #e2876a;
margin-bottom: 6px;
font-size-adjust: 0.47;
}
#left-home-content p {
line-height: 1.6;
margin-bottom: .6em;
}
.read-more-link {
display: block;
font-family: AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
font-size-adjust: 0.47;
font-weight: normal;
font-style: normal;
margin-top: 12px;
}
#left-home-content .read-more-link {
margin-top: 12px;
}
#left-home-spread {
position: absolute;
bottom: 34px;
right: 34px;
}
/* @group Spread the word */
.spread-the-word {
background: url(/dev/images/bg-spread.png) no-repeat;
width: 260px;
height: 31px;
padding-top: 17px;
padding-left: 15px;
-moz-border-radius: 10px; /* FF1+ */
-webkit-border-radius: 10px; /* Saf3-4 */
border-radius: 10px; /* Opera 10.5, IE 9, Saf5, Chrome */
box-shadow: 0 0 5px rgba(86,86,86,0.25);
-moz-box-shadow: 0 0 5px rgba(86,86,86,0.25);
-webkit-box-shadow: 0 0 5px rgba(86,86,86,0.25);
}
.spread-the-word ul {
float: left;
margin: -7px 0 0 8px;
width: 115px;
}
.spread-the-word li {
float: left;
list-style: none;
width: 28px;
height: 28px;
margin: 0 12px 0 0;
}
.spread-the-word .last-item {
margin-right: 0;
}
#left-home-content .spread-the-word h3 {
color: white;
font-size: 16px;
float: left;
font-size-adjust: 0.47;
width: 129px; /* Specified to correct for MobileSafari oddness re: SVG fonts*/
text-shadow: #627C39 0 0 10px;
text-shadow: rgba(98,124,57,0.5) 0 0 10px;
}
#left-home-content .addthis_32x32_style .at300bs,
#left-home-content .addthis_32x32_style .at15t {
background: url(/dev/images/spread-the-word/spread-the-word-icons.png) no-repeat left;
overflow: hidden;
display: block;
background-position: 0 0;
height: 28px;
width: 28px;
line-height: 28px!important;
}
#left-home-content .at300bs:hover {
opacity: 1;
box-shadow: 0 0 15px #fff;
-moz-box-shadow: 0 0 15px #fff;
-webkit-box-shadow: 0 0 15px #fff;
}
#left-home-content .addthis_default_style .at300b,.addthis_default_style .at300m { padding: 0; }
#left-home-content .addthis_32x32_style .at15t_compact { background-position: 0 0; width: 28px; height: 28px; margin-right: 0; }
#left-home-content .addthis_32x32_style .at15t_facebook { background-position: 0 -78px; width: 28px; height: 28px; }
#left-home-content .addthis_32x32_style .at15t_linkedin { background-position: 0 -156px; width: 28px; height: 28px; }
/* @end */
/* @end */
그리고 그것과 함께 갈 수있는 HTML : 코드는 먼저 CSS, 다음과 같습니다. 여기
<section id="left-home-content-container" class="left-col">
<div id="left-home-content">
<h3><a href="#">Now Let’s Make a Difference</a></h3>
<div class="spread-the-word" id="left-home-spread">
<h3>Spread the Word</h3>
<ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
<li><a class="addthis_button_linkedin"></a></li>
<li><a class="addthis_button_facebook"></a></li>
<li class="last-item"><a class="addthis_button_compact"></a></li>
</ul>
</div>
<p>Donec non sapien quis sapien vehicula pellentesque sed eu lacus. In at eros nec mi imperdiet tempor at non dolor. Morbi porta pretium sollicitudin. Proin blandit consequat turpis at pulvinar. Aliquam eros lectus, dictum sed consequat a, congue sed leo. In in eros at lacus laoreet feugiat. Ut pellentesque dolor eget sem vulputate bibendum. Ut pellentesque dolor eget sem vulputate biben dum biben.</p>
<p>Nulla vehicula lobortis ullamcorper. Aliquam pellentesque, nulla non condimentum vulputate.</p>
<span class="read-more-link"><a href="#">Read More</a></span>
</div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->
그리고
내가합니다 (.read-more-link, 그것은 위의 텍스트에서 위치입니다 걸릴 것이
#left-home-spread에 정렬 할 필요가 없습니다)처럼 내 최종 결과를 원하는 무엇을 설명하기 위해,
screenshot입니다.
아이디어가 있으십니까? position:absolute;과 float은 섞이지 않습니다. position:relative;은 "확산"<div> (별칭 #left-home-spread)이 그 위의 텍스트 내용을 기준으로 배치됩니다. #left-home-spread을 콘텐츠 위에 올려 놓으면 float:right;으로 설정 한 다음 큰 margin-top을 지정하면 margin이 플로팅 된 #left-home-spread의 일부로 계산되므로 오른쪽에 간격 구멍이 생깁니다.
아이디어가 있으십니까?
와우. 나는 이것에 너무 많은 시력이 있었다는 것을 믿을 수 없다. 아직도이 코드를 풀어서 이걸 해결해 주셨으면 좋겠어. \ – jeffbyrnes