2013-05-31 2 views
0

h2 태그가 포함 된 3 개의 콘텐츠 상자를 모두 인라인으로 표시하려고합니다.Css divs and h1 h2

상자를 정렬했지만 h1h2 태그를 스타일링하는 데 문제가있는 것으로 보입니다. 그들은 단지 스타일하지 않을 것입니다. 아니 내가 속기 상기 h1h2

이 내 CSS에 대한 올바른 CSS를 가지고 있는지 확인하는 경우 :

#day1, #day2, #day3 {width: 230px; height: 100px; margin-bottom:15px; background:#fff; word-wrap: break-word; display:inline-block; position:relative;} 
#day1 {float: left;} 
#day2 {margin-left: 15px; float: left;} 
#day3 {float: right;} 
#day1, #day2, #day3 h1 { font-size:18px; font-weight:200; color:#4778DE; padding:0 5px;} 
#day1, #day2, #day3 h2 { font-size:12px; font-weight:200; color:#4778DE; padding:0 5px;} 

#daybutton {position: absolute; display:inline-block; bottom:0; margin-left: 130px; margin-bottom:5px;} 
#daybutton p { font-size:12px; color:#4d4d4d;} 
#daybutton p a { font-size:14px; color:#4778DE; text-decoration:none;} 
#daybutton p a:hover {color:#88B828; text-decoration:none;} 

과 HTML :

<div id="day1"> 
<h1>Name Here</h1> 
<h2>Job Title Here</h2> 
<div id="daybutton"> 
<p><a href="#">Read more &gt;</a> </p> 
</div> 
</div> 
<div id="day2"> 
<h1>Name Here</h1> 
<h2>Job Title Here</h2> 
<div id="daybutton"> 
<p><a href="#">Read more &gt;</a> </p> 
</div> 
</div> 
<div id="day3"> 
<h1>Name Here</h1> 
<h2>Job Title Here</h2> 
<div id="daybutton"> 
<p><a href="#">Read more &gt;</a> </p> 
</div> 
</div> 

답변

3

귀하의 선택기 약간의 조정이 필요합니다. 이 라인을 교체하려고 5 + 6 :

#day1 h1, #day2 h1, #day3 h1 { font-size:18px; font-weight:200; color:#4778DE; padding:0 5px;} 
#day1 h2, #day2 h2, #day3 h2 { font-size:12px; font-weight:200; color:#4778DE; padding:0 5px;} 
+0

빠른 응답 주셔서 감사합니다. Fraser - 이제 완벽하게 작동합니다. – user1809742

+0

걱정할 필요가 없습니다. 다행히 도울 수있어. – Fraser

0

아니면 다음 단지 컨테이너 사업부 내에서 모든 사업부의의 포장 및 H1 및 H2

#container h1{ font-size:18px; font-weight:200; color:#4778DE; padding:0 5px; } 
#container h2 { font-size:12px; font-weight:200; color:#4778DE; padding:0 5px;} 

<div id="container"> 
    <div id="day1"> 
    <h1>Name Here</h1> 
    <h2>Job Title Here</h2> 
    <div id="daybutton"> 
    <p><a href="#">Read more &gt;</a> </p> 
    </div> 
    </div> 
    <div id="day2"> 
    <h1>Name Here</h1> 
    <h2>Job Title Here</h2> 
    <div id="daybutton"> 
    <p><a href="#">Read more &gt;</a> </p> 
    </div> 
    </div> 
    <div id="day3"> 
    <h1>Name Here</h1> 
    <h2>Job Title Here</h2> 
    <div id="daybutton"> 
    <p><a href="#">Read more &gt;</a> </p> 
    </div> 
    </div> 
</div> 
위해 CSS를 아래의 적용 추가 할 계획 더 DIV의의가있는 경우
관련 문제