Html 调整浏览器窗口大小时,将页脚中的内容居中
我正在用wordpress主题建立一个网站。我有两个元素,一个在左边浮动,另一个在页脚右边浮动。当我调整浏览器窗口的大小时,我需要使它位于第一个窗口下方第二个窗口的中心。我想我需要设置浮动:无;在媒体的询问中,我不知怎么把它放在了中心,但我没能弄明白 HTMLHtml 调整浏览器窗口大小时,将页脚中的内容居中,html,css,wordpress,responsive-design,Html,Css,Wordpress,Responsive Design,我正在用wordpress主题建立一个网站。我有两个元素,一个在左边浮动,另一个在页脚右边浮动。当我调整浏览器窗口的大小时,我需要使它位于第一个窗口下方第二个窗口的中心。我想我需要设置浮动:无;在媒体的询问中,我不知怎么把它放在了中心,但我没能弄明白 HTML 我附加了一张图片,这样当您将窗口调整到800px以下时,您可以看到我希望它的样子。删除浮动位置,如下所示 <div class="site-info"> <div style="margin:0 auto; wid
我附加了一张图片,这样当您将窗口调整到800px以下时,您可以看到我希望它的样子。删除浮动位置,如下所示
<div class="site-info">
<div style="margin:0 auto; width: 75%;">
<p >© Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
<div >Naleznete nás na sociálních sítích:
<a style="display: block; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a>
<a style="display: block; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a>
</div>
<div class="clear"></div>
</div>
</div><!-- .site-info -->
以下是当移除800px以下的浮动时,我将如何对HTML执行CSS: 您的代码:
<div class="site-info">
<div style="margin:0 auto; width: 75%;">
<p style="float:left;">© Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
<div style="float:right;">Naleznete nás na sociálních sítích:
<a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a>
<a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a>
</div>
<div class="clear"></div>
</div>
</div><!-- .site-info -->
这将在视口低于800px时删除p和div上的浮动。如何在媒体查询中选择abd标记并删除它们上的浮动@Binoy ChackoYou真的应该将CSS分离成一个专用文件,并在必要时仅使用类和ID为每个层分配适当的值。不幸的是没有帮助:/@Gordon Smith如果你认为这是一个目标问题,你可以始终给出“p”标记和“div”标记类名,然后您只需将“.site info>div p、.site info>div>div{float:none;}”行更改为.class name one、.class name two{float:none;}
@media screen and (max-width: 300px) {
.class_name {
float:none;
}
}
<div class="site-info">
<div style="margin:0 auto; width: 75%;">
<p style="float:left;">© Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
<div style="float:right;">Naleznete nás na sociálních sítích:
<a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a>
<a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a>
</div>
<div class="clear"></div>
</div>
</div><!-- .site-info -->
@media all and (max-width:799px)
{
.site-info > div p, .site-info > div > div { float:none; }
}