CSS Отзывчивый - Невозможно получить требуемое выравнивание - PullRequest
Новая
       15

CSS Отзывчивый - Невозможно получить требуемое выравнивание

2 голосов
/ 03 мая 2020

Я пытаюсь получить следующий отзывчивый нижний колонтитул с CSS. Я не могу понять, как это сделать, я застрял с выравниванием и кодом. Может ли какой-нибудь гуру пролить свет? Я очень ценю. Я пытался измениться и думаю, что до сих пор не очень глубоко понимаю код. Я не могу достичь того, чего хочу. Пожалуйста помоги.

Trying to achieve

JSFiddle Link для кода и 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-->

Ответы [ 4 ]

3 голосов
/ 03 мая 2020

Произошла некоторая реструктуризация для таблицы и css, теперь должно быть хорошо. Есть много гораздо лучших способов сделать этот дизайн отдельно от таблицы. Но я сделал это только в формате таблицы.

Если возможно, вы можете отказаться от таблицы для этого дизайна и просто использовать flex или basi c 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>

Layout

1 голос
/ 03 мая 2020

нет необходимости использовать таблицу для этого дизайна, вы можете использовать flex и легко его достичь, лучший способ изучить flex в увлекательной игровой форме - это flexbox froggy

это просто и мощный, попробуйте это и вам нужно что-то еще на мобильном, так что просто сделайте ширину 100% или все в точках реагирования, свойство flex-wrap разбьет его на один столбец, или вы также можете использовать flex-direction. 

body {
	Margin: 0!important;
	padding: 15px;
	background-color: #FFF;
}
* {
  margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
	width: 100%;
  background: #053D66;
  padding: 20px 30px;
}
img {max-width: 100%;}
p {
    Margin:0;
}

a {
    color: #F1F1F1;
    text-decoration: none;
}

.d-flex {display: flex;}
.wrapper-inner2 {
  flex-wrap: wrap;
}
..wrapper-inner2 >div {display: flex; justify-content: center;}

.image,.contact {width: 50%;}
.image img {
  max-width: 75%;
  margin: 0 auto;
}
.social {width: 100%; display: flex; justify-content: center; margin-top: 40px;}

.social > a {
  display: inline-block;
  margin-right: 20px;
}
.social > a:last-child {
  margin-right: 0;
}
<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 d-flex">
            <div class="image">
              <img src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="">
            </div>
            <div class="contact">
            <p class="text2"><a href="">Email: hansheung@gmail.com</a></p>
            <p class="text2"><a href="">Tel: 04-2294366</a></p>
                                    
            </div>
<div class="social"><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><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></div>
            
        </div><!--End of Wrapper Inner-->
    </div><!--End Wrapper-->

    


</body>
0 голосов
/ 03 мая 2020

Вот решение, которое вы можете сделать из двух делений.

Вы можете изменить в соответствии с вашим стилем контента 

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.img{
max-width:100%;height:auto;}
.column {
  float: left;
  width: 50%;
  padding: 5px;
}

.socialicons{
float: left;
  width: 100%;
  padding: 5px;
  text-align: center;



}
.row{
background: #365F91;}
/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;

}
</style>
</head>
<body>



<div class="row">
  <div class="column">
    <img src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <p>Email: hansheung@gmail.com</p>
    <p>Tel: 04-2294366</p>
  </div>

  <div class="socialicons">
  <img src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" >


  <img src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" >
  </div>
</div>

</body>
</html>
0 голосов
/ 03 мая 2020

Этого можно добиться гораздо проще, воспользовавшись преимуществом дисплея: flex. Вот некоторая полезная документация.

Вы можете обернуть элементы div вокруг двух строк и присвоить этому свойству свойство "display: flex".

...