如何在网站首页上设置DIV Container 100%宽度？

时间：2017-01-27 作者：Alexander

#container {
    width: 75%;
    float: right;
}

如果我将宽度更改为%100，则会影响整个网站，我只希望主页的宽度为100%，其他所有页面的边栏宽度为75%

3 个回复

SO网友:Nathan Johnson

这更像是一个CSS问题，而不是一个WordPress问题，但是

有几种方法可以做到这一点，但我认为这是最简单的。WordPress主题应该在body标签上使用home类，而站点内容区域有一类站点内容，因此要将主要内容区域设置为全宽，请使用：

.home .site-content {
  width: 100%;
}

你也必须隐藏侧边栏。如果要隐藏所有这些内容：

.sidebar {
  display: none;
}

如果您使用的是WordPress 4.7+，您可以通过Customizer->Additional CSS轻松添加CSS。

SO网友:kidcoder SAVE UKRAINE

给div一个id

HTML

<div id="whatever"> stuff in your div </div>

然后在CSS文件中将其更改为100%：

CSS

#whatever { width:100%; }

只有具有该ID的div才会受到影响。

SO网友:Rishabh

这个问题可以用wordpress函数解决，比如is_home() 函数用于检查当前页面是否为主页。您可以使用此功能仅在主页上应用css。

有两种方法

我假设你想增加钙的宽度.container.

在您的head 您的header.php 使用如下函数

 <head>
      <?php if(is_home()){ ?>
    <style>
           .container{width:100%!important;}
    </style>
  <?php } ?>
</head>

以上head部分中的函数将实现该技巧，我已将!important 具有css属性，因此它将超过此类的其他属性。这style 标签css将仅应用于主页，因为is_home() 作用

另一种方法是在内部body 标签例如，这是要更改其宽度的div

<div class="container"> 
//content....
</div>

您可以这样对该div设置条件

<?php if(is_home()){ ?>
 <div class="container" style="width:100%!important;"> 
 <?php } else { ?>
 <div class="container"> 
 <?php } ?>
//content....
</div>

以上述方式，我直接将条件放在div本身上（仅放在div的开始部分，而不是结束部分）。所以，只有在主页上调用带有样式属性的div，其他div将在其余页面上调用。

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中，必须将下面的代码放入函数中。php的子主题，但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它，那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我，放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s

小码农CODE

如何在网站首页上设置DIV Container 100%宽度？

相关推荐

在带有PHP的子主题中包含style.css