0

我试图让 3 个内容框都内联，其中包含 ah1和h2标签。

我已经对盒子进行了分类，但似乎在设置h1和h2标签的样式时遇到了问题。他们只是不会风格。不确定我的简写 css 是否h1正确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 中，并将以下 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>
于 2013-05-31T09:36:59.517 回答