php - Css 样式不起作用

Question

这是我的工地 - mysite我已经创建了一个页面并使用以下代码将其调用到主页

<div class="hilight-hometext">
<?php if(is_front_page()) :
$home_page_post_id = 308;
$home_page_post = get_post( $home_page_post_id, ARRAY_A );
$content_home = $home_page_post['post_content'];
$content_title = $home_page_post['post_title'];
?><?php
echo $content_home;
endif; ?></div>

结果是

<div class="hilight-hometext">
<div id="hilightbox">
<div class="hilightbox-text">
<h2>At Salisbury we want everyone to understand their landscaping choices</h2>
Our latest landscaping innovation is our Outdoor Vision questionnaire. We’ll guide you     through a set of questions that will help you realize what you want out of your yard.

</div>
<!-- end tier 2 text -->
<div class="hilightbox-action">

<a class="myButton" href="resources/the-outdoor-vision-tool/">GET STARTED</a>

Your Outdoor Vision

</div>

</div></div>

我添加了如下样式

#hilightbox {
background: url(../img/action-bg.jpg);
width: 100%;
margin: 20px auto;
}
#hilightbox .hilightbox-text {
width: 75%;
float: left;
margin: 0;
}
#hilightbox .hilightbox-action {
width: 25%;
float: left;
padding: 15px 0;
}
.myButton {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c9df23),         color-stop(1, #747728));
background: -moz-linear-gradient(center top, #c9df23 5%, #747728 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9df23', endColorstr='#747728');
background-color: #c9df23;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 20px;
font-weight: bold;
padding: 14px 14px;
text-decoration: none;
text-shadow: 1px 1px 0px #747728;
}

但是背景图片和样式没有显示出来，请帮忙!!谢谢

Answer 1

我想如果你只是添加这个:

#hilightbox {
  background: url(../img/action-bg.jpg);
  width: 100%;
  margin: 20px auto;
  overflow: hidden;
}

它会解决你的问题。目前您的容器 div #hilightbox 不知道子 div 的(.hilightbox-text 和 hilightbox-action)高度 & width 因为 float:left 属性。