Css 当分辨率改变时，如何设置div的宽度以占据整个空间？

我正在使用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将这些元素的宽度设置为宽度：分辨率达到一定大小时为100%

---

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

在所需的媒体查询中，css将这些元素的宽度设置为宽度：分辨率达到一定大小时为100%

---

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

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

​

---

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

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

​

---

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

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

将此添加到css中

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


}

---

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

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

将此添加到css中

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


}

---

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

谢谢您的回复和Joplo的链接！老实说，就在今天，我已经开始对自己进行关于整个“响应式”理念的教育。我做了几处修改，终于使它工作了。对于“.boxed2”：1。删除“宽度”值并添加“填充”。2.由于填充，我将媒体查询宽度更改为“86%”，而不是“100%”。我也为“.boxed3”做了同样的事情。前端的一切看起来都很好。我希望这是一个很好的代码解决方案。没问题。很高兴我能帮忙这可能不是最好的解决方案-这是因为，如果您将窗口再缩小一点，86%将变得太多-它将超出容器的宽度。一种解决方案是将填充设置为一个百分比值，就像宽度一样。在您的情况下，填充（右填充）将为14%（100%-86%=14%）。如果您确实希望以像素为单位进行填充，您可以告诉浏览器将填充放在宽度的“内部”，使用以下css规则：

box size:padding box

（还有一个

边框框

，它也把边框放在里面-我实际上把它作为我的默认设置，将它应用到我的样式表顶部的所有元素

*{box size:border box；}

如果你想支持旧浏览器，那么框大小将不起作用。在这种情况下，你可以去掉宽度和定位样式（浮动、定位等）并将其应用到新的包装分区上。将填充物留在/放在盒子上，你会得到与盒子大小相同的结果：边框框；这里有一把小提琴比较“像素填充”解决方案感谢您的回复和链接Joplo！老实说，我今天刚开始自学整个“响应式”想法。我通过几次修改成功地使其工作。对于“.boxed2”：1.删除“宽度”值并添加“填充”。2.由于填充，我将媒体查询宽度更改为“86%”，而不是“1”00%'。我对“.boxed3”也做了同样的操作。前端的一切看起来都很好。我希望这是一个代码方面的好解决方案。没问题。很高兴我能提供帮助。--这可能不是最好的解决方案-这是因为，如果你将窗口再缩小一点，86%就太多了-它将超出容器的宽度。一个解决方案是将填充物设为每英寸百分比值，与宽度一样。在您的情况下，填充（右填充）将为14%（100%-86%=14%）。如果您确实希望以像素为单位进行填充，您可以告诉浏览器将填充“放在”宽度内，使用此css规则：

框大小：padding box；

（还有一个

边框框

，它也把边框放在里面-实际上我把它作为我的默认设置，把它应用到我的样式表顶部的所有元素

*{box size:border box；}

如果你想支持旧的浏览器，那么框大小就不起作用了。在这种情况下，你可以去掉宽度和定位样式（浮动、定位等）并将其应用到新的包装分区上。将填充物留在/放在盒子上，你会得到与盒子大小相同的结果：边框框；下面是一个比较“像素填充”解决方案的小提琴

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


}