0

我正在使用 WordPress 和我购买的模板来构建我遇到问题的网站。该模板是为了响应而构建的，我面临一些问题，无论我尝试了什么，我都无法找到解决它们的方法。

有两个框在重新调整窗口大小时不会占据所有可用宽度。

这是php代码：

<div class="gb_ff social_share bold font_x_small boxed2">
                     <span class="meta_title_social">
                           <?php gb_e('Share') ?>
                     </span>
                    <?php get_template_part('inc/social-share') ?>
                </div>

            <div class="gift boxed3">
                 <span class="gift_image">
                        <img src="http://topgreekgyms.fitnessforum.gr/wp-content/uploads/2012/12/gift.png";?>
                 </span>

                 <span class="gift_title">
                        <a href="<?php gb_add_to_cart_url(); ?>" class=""><?php gb_e('Buy for friend') ?></a>
                  </span>
            </div>

这是CSS

.gb_ff, h1, h2, h3, h4, h5 {
font-family: Arial;
color: #666666;
text-transform: none;
}

.social_share {
    width: auto;
    float: left;
    padding: 9px 0 0 0;
    }


.boxed2 {
    width: 300px;
    height: 65px;
    background-color: #f9f9f9;
    margin-top: 15px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-image: url(http://topgreekgyms.fitnessforum.gr/wp-content/themes/blank-child-theme/img/gradient.png);
    background-repeat: repeat-x;
    background-position: center bottom;
    border-bottom: 1px solid #CCC;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 1px 1px #7D7D7D;
    }

.gift{
    font-size: 0.6em;
    font-family: Arial;
    float:left;
    }

.boxed3 {
    width: 297px;
    height:65px;
    background-color: #f9f9f9;
    margin-top: 15px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-image: url(http://topgreekgyms.fitnessforum.gr/wp-content/themes/blank-child-theme/img/gradient.png);
    background-repeat: repeat-x;
    background-position: center bottom;
    border-bottom: 1px solid #CCC;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 1px 1px #7D7D7D;
    }

.gift_image {
    float: left;
    margin: 16px 9px;
    }

.gift_title {
    color: #666;
    font-size: 15px;
    font-family: arial;
    font-weight: bold;
    margin-left: 3px;
    margin-top: 10px;
    line-height: 66px;
    }

我所指的框是出现在倒计时下方的框。

4

3 回答 3

2

我不知道您的 css 是如何组织的，但是这些行应该可以做到（假设它足够具体）：

@media all and (max-width: 900px) { /* this media query rule is probably
                                       in the css already. no need to repeat it*/
   .boxed2,
   .boxed3 {
       width: 100%;
   }
}

如果这是您第一次看到/听到媒体查询，那么这可能很有用：CSS 媒体查询和使用可用空间

于 2012-12-11T14:53:40.520 回答
1

在您想要的媒体查询中，当分辨率为特定大小时，CSS 将这些元素的宽度设置为 width:100%。

媒体查询已经存在 - 您只需在其中为这些元素添加一个 css 规则。

于 2012-12-11T14:50:47.157 回答
1

CSS 媒体查询用于为所需的屏幕/窗口分辨率应用某些样式。例如，您的主题中的所有媒体查询都可以在 style-media-queries.css 文件中找到。

将此添加到您的CSS

@media (max-width: 900px) {
   #boxed2, #boxed3{
     width:auto;
     float:none;
   }


}

您可以在此处阅读有关媒体查询的更多信息

于 2012-12-11T15:00:23.783 回答