0

私は 3 つのコンテンツ ボックスをすべてインラインで取得しようとしてh1いh2ます。

h1ボックスを並べ替えましたが、とh2タグのスタイル設定に問題があるようです。彼らはただスタイリングしません。h1とのショートハンド css が正しいかどうかわからないh2

これは私の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>
4

2 に答える 2

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;}
于 2013-05-31T09:22:58.870 に答える
0

または、追加する予定の div がさらにある場合は、すべての div をコンテナー div 内にラップし、h1 と h2 に以下の css を適用します。

#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>
于 2013-05-31T09:36:59.517 に答える