html - 移动 View 中具有多个页脚和流体网格的 CSS 问题

标签 html css grid footer fluid

我正在设计的流体网格网站中有 3 个页脚区域。在左右两个 float 页脚上方有一个顶部版权页脚(我称它们为小部件，尽管它们不是)。布局在桌面上看起来不错，但我希望小部件页脚在移动 View 中左对齐并堆叠为彼此下方的 block 。他们几乎这样做了——但我向右浮动的页脚在移动设备中不会向左对齐。

我已将 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">
        &copy; 2014 Collins Group Design, Inc. All rights reserved.
    </div>
    <hr>
    <div id="widget">
        <div id="footer1">
            <h4> Contact Us:</h4>
            <p>&#9742; &nbsp;<a href="tel:206-919-5474">206.919.5474</a></p>
            <p>&#9993; &nbsp;<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>

最佳答案

为手机设置#footer1 和#footer2 为float: none。仅将它们 float 以获得更广阔的视野。

#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">&copy; 2014 Collins Group Design, Inc. All rights reserved.</div>
    <hr>
    <div id="widget">
        <div id="footer1">
             <h4> Contact Us:</h4>

            <p>&#9742; &nbsp;<a href="tel:206-919-5474">206.919.5474</a>

            </p>
            <p>&#9993; &nbsp;<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>

关于html - 移动 View 中具有多个页脚和流体网格的 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26636748/

上一篇：html - 如何在窗口展开时停止图像自动调整大小

下一篇：html - 导航栏内联表单 bootstrap 3

相关文章：

带有时间和事件的 JavaScript 逻辑

javascript - 如何防止 IFRAME 重定向顶级窗口

javascript - 使用通过 API 接收的字体定义作为前端的字符串

javascript - 一次迭代一个网格行

javascript - 触发 DIV 容器 onclick 而不是在内容中

php - 在 html 页面中使用 js、php 创建 SEO 友好的 url

css - Grails 过滤器禁用样式/CSS

html - 删除边距底部的第 N 个子表达式在响应式中不起作用

css - 为什么 Bootstrap 网格系统默认不支持 5 列？

java - 创建多彩板

©2024 IT工具网  联系我们