我在设计的流体网格网站上有3个页脚区域。在左右两个浮动页脚之上有一个顶级版权页脚(即使它们不是,我也称它们为小部件)。桌面上的布局看起来很好,但是我希望在移动视图中,小部件页脚左对齐并堆叠为彼此下方的块。他们几乎做到了 - 但是我向右浮动的页脚在移动设备中没有对齐。
我已将css作为内联样式插入到下面的html代码中:
<style>
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
#page {
margin: 40px auto;
padding: 0 1em;
max-width: 61.75em; /* 988px / 16px = 61.75em */
}
h1 {
font-family: 'EB Garamond', serif;
font-size: 1.55em;
letter-spacing: .18em;
font-style:normal;
text-transform:uppercase;
}
h2 {
font-family: 'EB Garamond', serif;
font-size: 1.55em;
letter-spacing: .11em;
font-style:normal;
text-transform:capitalize;
}
h4 {
font-family: 'EB Garamond', serif;
font-size: 1.2em;
letter-spacing: .08em;
font-style: normal;
color: #73624d;
margin-top: -5px;
}
#mainNav {
position: relative;
width: 100%;
margin: 40px auto;
background-color: #fff;
font-family:"Century Gothic", "HelveticaNeueLT Pro 45 Lt", sans-serif;
font-size:16px;
text-transform: uppercase;
float:right;
z-index: 1000;
}
#mainNav ul {
text-align:center;
}
#mainNav li {
list-style: none;
float: left;
width: 140px;
height: 30px;
line-height: 30px;
text-align: left;
}
#mainNav li a {
color: #73624d;
text-decoration: none;
display: block;
}
#mainNav li a:hover {
background-color: #d9e2e7;
text-align: left;
}
#mainNav li ul {
position: absolute;
display: none;
}
#mainNav li:hover ul {
display: block;
}
#mainNav li ul li {
float: none;
display: inline;
}
#mainNav li ul li a {
width: 190px;
position: relative;
padding: 0 0 0 4px;
border-left: 1px solid #2c2216;
border-right: 1px solid #2c2216;
border-bottom: 1px solid #2c2216;
background: #73624d;
color: #fff;
}
#mainNav li ul li a:hover {
background: #d9e2e7;
color: #000;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 96.6666%;
padding-left: 1.6666%;
padding-right: 1.6666%;
clear: none;
float: none;
}
#div1 {
}
.logo {
text-align: center;
}
#mainContent {
}
#slider {
}
#footerCopy {
text-align:center;
font-family: 'EB Garamond', serif;
font-size: 15px;
letter-spacing: .04em;
margin: 10px auto;
}
#widget {
text-align: center;
}
#widget p{
font-size: 13px;
}
#footer1 {
margin: 5px 25px;
display:block;
float:left;
}
#footer2 {
margin: 5px 25px;
display: block;
float: right;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 98.6111%;
padding-left: 0.6944%;
padding-right: 0.6944%;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
}
.logo {
}
#mainContent {
}
.dmxNivoSlider {
clear:both;
}
#widget {
text-align: left;
}
#footer1 {
margin: 5px 25px;
display:block;
float:left;
}
#footer2 {
margin: 5px 25px;
display: block;
float: left;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
</style>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
<header class="fluid logo"><img src="_images/CGDA_Logo.png" alt="Collins Group Design Logo"/></header>
</div>
<div id="page">
<nav class="mainNav" id="mainNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Our Approach</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Accolades</a></li>
<li><a href="#">Awards | Publications</a></li>
</ul>
</li>
<li><a href="#">Design </a>
<ul>
<li><a href="#">Process</a></li>
<li><a href="#">Value | Expectations</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Fee Structure</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Kitchen | Bath</a></li>
<li><a href="#">Living | Dining</a></li>
<li><a href="#">Bedrooms | Hobby Rooms</a></li>
<li><a href="#">Entry | Halls</a></li>
<li><a href="#">Bespoke Furniture</a></li>
</ul>
</li>
<li><a href="#">Bespoke</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<article id="mainContent" class="fluid">
<div id="slider1" class="dmxNivoSlider slider-wrapper theme-basic" style="">
<div class="nivoSlider"><img id="img_UC_Slide2" src="_images/UC-Slide2.jpg" alt="" data-thumb="_images/thumbs/UC-Slide2.jpg" />
<img id="img_UC_Slide3" src="_images/UC-Slide3.jpg" alt="" data-thumb="_images/thumbs/UC-Slide3.jpg" />
<img id="img_UC_Slide4" src="_images/UC-Slide4.jpg" alt="" data-thumb="_images/thumbs/UC-Slide4.jpg" />
<img id="img_UC_Slide5" src="_images/UC-Slide5.jpg" alt="" data-thumb="_images/thumbs/UC-Slide5.jpg" />
</div>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#slider1").dmxNivoSlider(
{"pauseTime": 4000, "dataSource": ""}
);
}
);
// ]]>
</script>
</article>
<footer class="fluid">
<div id="footerCopy">
© 2014 Collins Group Design, Inc. All rights reserved.
</div>
<hr>
<div id="widget">
<div id="footer1">
<h4> Contact Us:</h4>
<p>☎ <a href="tel:206-919-5474">206.919.5474</a></p>
<p>✉ <a href="mailto:info@collinsgroupdesign.com?Subject=Website%20Inquiry" target="_top">Collins Group Design</a></p>
</div>
<div id="footer2">
<h4>Stay In Touch:</h4>
<img src="_images/icons/Facebook.png" alt="Visit Collins Group Design on Facebook"/>
<img src="_images/icons/LinkedIn.png" alt="Visit Collins Group Design on LinkedIn"/>
<img src="_images/icons/Pinterest.png" alt="Visit Collins Group Design on Pinterest"/>
<img src="_images/icons/Twitter.png" alt="Visit Collins Group Design on Twitter"/>
</div>
</div>
</footer>
答案 0 :(得分:0)
你应该使用媒体查询将两个页脚留在移动设备上
<强>更新强>
要让它们堆叠在彼此之下,还要在移动设备上添加display: block
答案 1 :(得分:0)
为移动设备设置#footer1
和#footer2
为float: none
。只有浮动才能获得更广阔的视野。
#footer1, #footer2 {
margin: 5px 25px;
display: block;
float: none; /* <- or don't even declare this as it's float none by default */
}
@media only screen and (min-width: 481px) {
#footer1, #footer2 {
float:left;
}
/* ...etc... */
}
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
h4 {
font-family:'EB Garamond', serif;
font-size: 1.2em;
letter-spacing: .08em;
font-style: normal;
color: #73624d;
margin-top: -5px;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 96.6666%;
padding-left: 1.6666%;
padding-right: 1.6666%;
clear: none;
float: none;
}
#div1 {
}
.logo {
text-align: center;
}
#mainContent {
}
#slider {
}
#footerCopy {
text-align:center;
font-family:'EB Garamond', serif;
font-size: 15px;
letter-spacing: .04em;
margin: 10px auto;
}
#widget {
text-align: center;
}
#widget p {
font-size: 13px;
}
#footer1 {
margin: 5px 25px;
display:block;
float:none;
}
#footer2 {
margin: 5px 25px;
display: block;
float: none;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 98.6111%;
padding-left: 0.6944%;
padding-right: 0.6944%;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
}
.logo {
}
#mainContent {
}
.dmxNivoSlider {
clear:both;
}
#widget {
text-align: left;
}
#footer1 {
margin: 5px 25px;
display:block;
float:left;
}
#footer2 {
margin: 5px 25px;
display: block;
float: left;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
<footer class="fluid">
<div id="footerCopy">© 2014 Collins Group Design, Inc. All rights reserved.</div>
<hr>
<div id="widget">
<div id="footer1">
<h4> Contact Us:</h4>
<p>☎ <a href="tel:206-919-5474">206.919.5474</a>
</p>
<p>✉ <a href="mailto:info@collinsgroupdesign.com?Subject=Website%20Inquiry" target="_top">Collins Group Design</a>
</p>
</div>
<div id="footer2">
<h4>Stay In Touch:</h4>
<img src="_images/icons/Facebook.png" alt="Visit Collins Group Design on Facebook" />
<img src="_images/icons/LinkedIn.png" alt="Visit Collins Group Design on LinkedIn" />
<img src="_images/icons/Pinterest.png" alt="Visit Collins Group Design on Pinterest" />
<img src="_images/icons/Twitter.png" alt="Visit Collins Group Design on Twitter" />
</div>
</div>