响应式设计3个div横跨布局与ul堆叠在下面的中心div

我正在尝试为我的页脚设置3格1列表。左侧的链接，我的社交媒体图标上方中间的标题都居中，然后是右侧的另一个链接，完全如图所示。响应式设计3个div横跨布局与ul堆叠在下面的中心div

我设法与一些非常糟糕的代码来实现这一目标。我甚至不会向你展示CSS。这不怎么样。

<div class="contentFoot"> 
    <ul> 
     <li class="joinCommunity">Join our community</li> 
     <li class="leftFoot"><a class="contentFootLink" href="sign-up">Sign up for email updates</a></li> 
     <li> 
     <ul class="soc"> 
      <li><a class="soc-twitter" href="#"></a></li> 
      <li><a class="soc-facebook" href="#"></a></li> 
      <li><a class="soc-google" href="#"></a></li> 
      <li><a class="soc-pinterest" href="#"></a></li> 
      <li><a class="soc-instagram soc-icon-last" href="#"></a></li> 
     </ul> 
     </li> 
     <a class="contentFootLink" href="feedback"><li class="rightFoot">Give us feedback about our website</li></a> 
    </ul> 
    </div>

我现在正在尝试重写以获得响应式设计。这是我正在尝试重写我正在尝试有div-inlineblock，div-inlineblock，div-block，div-inlineblock;所以它会被留下，中间堆放，正确。那么当响应式设计足够小时，就可以很容易地将所有东西都堆叠起来。

当前状态：http://imgur.com/JCp49Js

HTML：

 <div class="contentFoot"> 
     <div class="leftFoot">Sign up for email updates</div> 
     <div class="midFoot">Join our community</div> 
     <ul class="soc"> 
      <li><a class="soc-twitter" href="#"></a></li> 
      <li><a class="soc-facebook" href="#"></a></li> 
      <li><a class="soc-google" href="#"></a></li> 
      <li><a class="soc-pinterest" href="#"></a></li> 
      <li><a class="soc-instagram soc-icon-last" href="#"></a></li> 
     </ul> 
     <div class="rightFoot">Give us feedback about our website</div> 
     </div>

CSS：

/************* footer ***************/ 
.contentFoot { 
text-align:center; 
width: 80%; 
margin: 0 auto; 
text-align: center; 
} 

.leftFoot, 
.midFoot, 
.rightFoot { 
    display: inline-block; 
    vertical-align:top; 
    width: 25%; 
} 

/***************Social Media****************/ 
@font-face { 
    font-family: 'si'; 
    src: url('font/socicon.eot'); 
    src: url('font/socicon.eot?#iefix') format('embedded-opentype'), 
     url('font/socicon.woff') format('woff'), 
     url('font/socicon.ttf') format('truetype'), 
     url('font/socicon.svg#icomoonregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
     font-family: 'Raleway', sans-serif; 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
     font-family:si; 
     src: url(font/socicon.svg) format(svg); 
    } 
} 

.soc { 
    display: block; 
    list-style:none; 
    width: 20%; 
    clear: both; 
} 
.soc li { 
    display:inline-block; 
    *display:inline; 
    zoom:1; 
} 
.soc li a { 
    font-family:si!important; 
    font-style:normal; 
    font-weight:400; 
    -webkit-font-smoothing:antialiased; 
    -moz-osx-font-smoothing:grayscale; 
     transition:.1s; 
    text-decoration:none; 
    text-align:center; 
    display:block; 
    position: relative; 
    width: 40px; 
    height: 40px; 
    line-height: 40px; 
    font-size: 22px; 
    color: #ffffff; 
} 
.soc a:hover { 
    z-index: 2; 
    -webkit-transform: translateY(-5px); 
    transform: translateY(-5px); 
} 
.soc-icon-last{ 
    margin:0 !important; 
} 
.soc-twitter { 
    background-color: #4da7de; 
} 
.soc-twitter:before { 
    content:'a'; 
} 
.soc-facebook { 
    background-color: #3e5b98; 
} 
.soc-facebook:before { 
    content:'b'; 
} 
.soc-google { 
    background-color: #d93e2d; 
} 
.soc-google:before { 
    content:'c'; 
} 
.soc-pinterest { 
    background-color: #c92619; 
} 
.soc-pinterest:before { 
    content:'d'; 
} 
.soc-instagram { 
    background-color: #9c7c6e; 
} 
.soc-instagram:before { 
    content:'x'; 
}

编辑：设置.soc包括保证金：0汽车;把它放在适当的位置，但其他一切仍然不一致。

来源

2016-01-22 john stamos

达到预期的设计，最好的办法是移动社交图标内中间部分，将部分是宽的33.333%：

HTML

<div class="midFoot">Join our community 
      <ul class="soc"> 
      <li><a class="soc-twitter" href="#"></a></li> 
      <li><a class="soc-facebook" href="#"></a></li> 
      <li><a class="soc-google" href="#"></a></li> 
      <li><a class="soc-pinterest" href="#"></a></li> 
      <li><a class="soc-instagram soc-icon-last" href="#"></a></li> 
      </ul> 
     </div>

CSS

.leftFoot, 
.midFoot, 
.rightFoot { 
    display: inline-block; 
    vertical-align:top; 
    font-size: 1rem; 
    width: 33.3333%; 
}

然后取出一些浏览器的默认样式列表：

.soc { 
    padding: 0; 
    margin: 0; 
}

我还添加了font-size: 0;到.contentFoot，然后设置font-size专门的页脚部分。这是删除在inline-block元素之间添加的空白的常用技巧。另一种选择是浮动元素。

DEMO

来源

2016-01-23 00:01:13 Guy

响应式设计3个div横跨布局与ul堆叠在下面的中心div

回答

相关问题