2013-05-31 123 views
0

我試圖獲得3個內容框全部內聯h1h2標籤裏面。Css divs和h1 h2

我已經整理了這些框,但似乎有一個問題,樣式爲h1h2標籤。他們不會風格。不知道如果我有速記CSS的h1h2

這是我的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

感謝您的快速反應弗雷澤 - 現在完美的作品。 – user1809742

+0

不用擔心。很高興我能幫上忙。 – Fraser

0

或者,如果有更多的div你打算增加則只是簡單的div容器內包裝你所有的div和應用下面CSS中的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>