html - CSS 响应式 - 无法获得所需的对齐方式

标签 html css responsive

我正在尝试使用 CSS 获取以下响应式页脚。我似乎不知道该怎么做，我有点坚持对齐和代码。请一些大师来阐明一下吗？我非常感激。我尝试过改变，但我想我仍然没有真正深入理解代码。我似乎无法实现我想要的。请帮忙。

Trying to achieve

JSFiddle Link for the Code and 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: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b5b2b8b693b6beb2fdbabf" rel="noreferrer noopener nofollow">[email protected]</a></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: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1472757f71547379757d783a777b79" rel="noreferrer noopener nofollow">[email protected]</a></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 或带有 div 的基本 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: 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: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690108071a010c1c070e290e04080005470a0604" rel="noreferrer noopener nofollow">[email protected]</a></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>

Layout

关于html - CSS 响应式 - 无法获得所需的对齐方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61573368/

上一篇：oracle - ORDS 与 Oracle Apex 之间的功能差异

下一篇：python - 获取错误 - ModuleNotFoundError : No module named 'xlsxwriter' with ExcelWriter

相关文章：

javascript - 我克隆 html 节点的方法不起作用

javascript - TinyMCE:检测 onLeave()

html - 使用 AngularJS 禁用以前悬停的效果

html - 关于响应式和非响应式网页

css - 为什么有些网页在移动设备上显示在平板电脑 View 中？

html - 输入[类型 ="checkbox"] :checked does not work in IE8

html - 网站侧面的粘性按钮(不动)

javascript - 在javascript中为每张幻灯片的分页控件添加导航

html - 如何在 bootstrap 3 进度条中居中放置文本？

html - 将 flexbox 网格转换为以不同顺序堆叠

©2024 IT工具网  联系我们