html - CSS响应 - 无法获得所需的对齐方式
问题描述
我正在尝试使用 CSS 获得以下响应式页脚。我似乎不知道该怎么做,我有点卡在对齐和代码上。可以请一些大师阐明一些光吗?我非常感激。我已经尝试过更改,但我认为我仍然没有真正深入了解代码。我似乎无法实现我想要的。请帮忙。
body {
margin: 0!important;
padding: 15px;
background-color: #FFF;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #727f80;
}
.outer-table {
width: 100%;
max-width: 670px;
margin: 0 auto;
background-color: #FFF;
}
td {
padding: 0;
}
p {
margin: 0;
}
a {
color: #F1F1F1;
text-decoration: none;
}
/*--- Start Two Column Sections --*/
.two-column {
text-align: center;
font-size: 0;
padding: 5px 0 10px 0;
}
/*--- Start Two Column Image & Text Sections --*/
.two-column img {
/* width: 100%; */
max-width: 280px;
height: auto;
}
.two-column .text {
padding: 10px 0;
}
/*--- Start Footer Section --*/
.footer {
width: 100%;
background-color: #365F91;
margin: 0 auto;
color: #FFF;
}
.footer img {
max-width: 135px;
margin: 0 auto;
display: block;
padding: 4% 0 1% 0;
}
p.footer {
text-align: center;
color: #FFF!important;
line-height: 30px;
padding-bottom: 4%;
text-transform: uppercase;
}
/*--- Media Queries --*/
@media screen and (max-width: 400px) {
.two-column .column,
.three-column .column {
max-width: 100%!important;
}
.two-column img {
/* width: 100%!important; */
}
}
@media screen and (min-width: 401px) and (max-width: 400px) {
.two-column .column {
max-width: 50%!important;
}
}
@media screen and (max-width:768px) {
img.logo {
float: none !important;
margin-left: 0% !important;
max-width: 200px!important;
}
}
.two-column img {
/* width: 100% !important; */
height: auto !important;
}
img.img-responsive {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="wrapper">
<table class="outer-table">
<tr>
<td class="two-column">
<table width="100%">
<tr>
<td class="footer">
<img src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
<p class="text2">Email: fake@ema.il</p>
<p class="text2">Tel: 00-0000000</p>
<br>
<a href="https://www.facebook.com/ttcinsurance"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></a>
</td>
<td class="footer">
<p class="text">Email: fake@gmail.com</p>
<p class="text">Tel: 00-000000</p>
<br>
<a href="https://www.youtube.com/channel/UCG6CJHqgnZN7HbX5NWqEhXg"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--End Wrapper-->
解决方案
对表格和css进行了一些重组,现在应该很好了。除了表格之外,还有很多更好的方法可以进行这种设计。但我只以表格格式进行。
如果可能的话,你可以为这个设计放弃表格,简单地使用flex
或基本的 css div's
......
body {
Margin: 0!important;
padding: 15px;
background-color: #FFF;
}
.wrapper {
width: 100%;
table-layout: fixed;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: white;
}
.outer-table {
width: 100%;
max-width: 670px;
margin: 0 auto;
background-color: #FFF;
background-color: #365F91;
padding: 2%;
}
/*--- Start Two Column Sections --*/
.two-column {
text-align: center;
font-size: 0;
padding: 5px 0 10px 0;
}
/*--- Start Two Column Image & Text Sections --*/
/* .two-column img {
width: 100%;
max-width: 280px;
height: auto;
}
.two-column .text {
padding: 10px 0;
} */
.section {
width: 50%;
text-align: center;
}
.m1{
margin: 1%;
}
.p1{
padding: 1%;
}
.contact-details{
text-align: left;
}
.text-left{
text-align: left;
}
.text-right{
text-align: right;
}
/*--- Start Footer Section --*/
/* footer {
width: 100%;
background-color: #365F91;
Margin: 0 auto;
color: #FFF;
}
.footer img {
max-width: 135px;
Margin: 0 auto;
display: block;
padding: 4% 0 1% 0;
}
p.footer {
text-align: center;
color: #FFF!important;
line-height: 30px;
padding-bottom: 4%;
text-transform: uppercase;
} */
/*--- Media Queries --*/
@media screen and (max-width: 400px) {
.two-column .column, .three-column .column {
max-width: 100%!important;
}
.two-column img {
/* width: 100%!important; */
}
.three-column img {
max-width: 60%!important;
}
}
@media screen and (min-width: 401px) and (max-width: 400px) {
.two-column .column {
max-width: 50%!important;
}
.three-column .column {
max-width: 33%!important;
}
}
@media screen and (max-width:768px) {
img.logo {
float:none !important;
margin-left:0% !important;
max-width: 200px!important;
}
.two-column .section {
width: 100% !important;
max-width: 100% !important;
display: inline-block;
vertical-align: top;
}
.two-column img {
/* width: 100% !important; */
height: auto !important;
}
img.img-responsive {
width:100% !important;
height:auto !important;
max-width:100% !important;
}
.content {
width: 100%;
padding-top:0px !important;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<div class="wrapper-inner2">
<table class="outer-table">
<tbody>
<tr>
<td class="section">
<img width="60%" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
</td>
<td class="section">
<div class="contact-details">
<p style="margin-bottom: 0">Email: hansheung@gmail.com</p>
<p style="margin-top: 0">Tel: 04-2294366</p>
</div>
</td>
</tr>
<tr>
<td class="text-right p1"><a href="https://www.facebook.com/ttcinsurance"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" alt=""></a></td>
<td class="text-left p1"><a href="https://www.youtube.com/channel/UCG6CJHqgnZN7HbX5NWqEhXg"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" alt=""></a></td>
</tr>
</tbody>
</table>
</div>
<!--End of Wrapper Inner-->
</div>
<!--End Wrapper-->
</body>
推荐阅读
- java - Java 对象获取方法等待对象定期刷新自身
- swift4 - 如何在swift 4中实现这个设计所有数据都可以水平和垂直滚动
- sas - SAS DO Loop 似乎跳过了记录
- c - C中的冒泡排序显示分段错误
- java - ImageIO PSD 库插件在 jar 中不起作用
- html - CSS 中@media 查询的标准断点是什么?
- python-3.x - 从没有管理员或 cmd 的记忆棒安装 python 模块
- sql-server - 如何在 vb.net 的 cmd.Parameters.AddWithValue("@" & Variable & "" , "") 中指定一个变量
- javascript - 是否可以将对象初始化为具有属性的函数?
- java - 将 int 数组转换为方向