Question

我是网络开发的新手，但仍然可以阅读/编辑一些内容。我正在修改一个wordpress主题的页脚，它有3个小部件。我能够设置页脚区域和3个小部件。

我想达到两个结果： 1 - 移动版，3个小部件，一个在另一个之下。 2 - 桌面版，3个小部件可见内联（并排）。在第二个我没有成功。

我在footer.php中定义

<footer>
<div id="footer-sidebar" class="secondary">
    <div id="footer-content">
        <div id="footer-sidebar1">
            <?php
            if(is_active_sidebar('footer-sidebar-1')){
            dynamic_sidebar('footer-sidebar-1');
            }
            ?>
        </div>
        <div id="footer-sidebar2" id="info-container:after">
            <?php
            if(is_active_sidebar('footer-sidebar-2')){
            dynamic_sidebar('footer-sidebar-2');
            }
            ?>
        </div>
        <div id="footer-sidebar3">
            <?php
            if(is_active_sidebar('footer-sidebar-3')){
            dynamic_sidebar('footer-sidebar-3');
            }
            ?>
        </div>

            <?php 
                wp_nav_menu(
                    array(
                        'theme_location' => 'Footer',
                        'container' => 'false',
                        'fallback_cb' => 'false',
                        'menu_class' => 'main-links pull-right',
                        'menu_id'=>'menu_footer'
                    ));
            ?>
    </div>
</div>

然后我在CSS中尝试了不同的东西，目前看起来像这样：

footer {
    background: #0c0c0c;
    color: white;    
}

footer h3{
    color: white;
    font-family: 'bangers';
    font-size: 30px;
}

#footer-sidebar {
    overflow: hidden;
    text-align: center;
}

#footer-content {
    padding-top: 20px;
    padding-bottom: 10px;
    overflow: hidden;
    margin-left: 10%;
    margin-right:10%;

#footer-sidebar1 {
    float: left;
    width: 21em;
    margin-right:5em;
    display: inline-flex;
}

#footer-sidebar2 {
    float: left;
    width: 21em;
    margin-right:5em;
    display: inline-flex;
}

#footer-sidebar3 {
    float: left;
    width: 21em;
    display: inline-flex;
}

#info-container:after {
    clear: both;
    content: "";
    display: table;
}

我尝试了不同的建议，但仍然无法成为桌面版的中心。任何帮助都非常感谢。如果我能进一步澄清这个问题，请告诉我。

Answer 1

为了达到在不同类型的设备（手机和桌面）上具有不同类型的外观和感觉的目的，您需要使用媒体查询做一些研究查找演示示例。

<强>方法：

在您的案例设计中，根据桌面视图，稍后使用适当的屏幕分辨率参数为移动视图编写@media，并编写代码以使其低于另一个。

Answer 2

@WisdmLabs是正确的，您需要使用媒体查询来正确调整大小。

然而，你遇到的问题是，每个div太大了，在显示内联后，一个div无法与另一个div一起使用原始width: 22em;，这就是使用<强>百分比，请注意，在使用百分比时，必须考虑填充和边距。这就是代码反映width: 32%;而不是width: 33%;的原因。

此外，在编写CSS时，如果您发现两次或三次写入相同的规则，则很可能是一种更有效的方式来编写它！

＆＃13;

#footer-content {

  padding-top: 20px;

  padding-bottom: 10px;

  overflow: hidden;

  margin-left: 10%;

  margin-right: 10%;

}

#footer-content > div {

  min-height: 50px;

  background: #ddd;

  width: 32%;

  float: left;

  margin-right: 1%;

}

#footer-content div:last-child {
  margin-right: 0;
  }

＆＃13;

<div id="footer-sidebar" class="secondary">
  <div id="footer-content">
    <div id="footer-sidebar1">

    </div>
    <div id="footer-sidebar2" id="info-container:after">

    </div>
    <div id="footer-sidebar3">

    </div>

  </div>
</div>

＆＃13;

将div放在页脚内部div上

2 个答案: