Div выходит из выравнивания при добавлении HREF - PullRequest
Новая
       7

Div выходит из выравнивания при добавлении HREF

1 голос
/ 28 января 2020

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

JSfiddle: https://jsfiddle.net/DcoltGaming/ap2jd1xh/7/

HTML: 

<div class="contactUsContainer">
            <a href="">
    <div class="ContactUsBox"> 
         <img src="https://img.icons8.com/plasticine/48/000000/phone.png">
    </div>
            </a>


    <a href="">
    <div class="emailIconBox">
    <img src="https://img.icons8.com/nolan/48/email.png">
          </div> 
          </a>


                 <a href="">
              <div class="IMBox"> 
         <img src="https://img.icons8.com/android/48/000000/computer.png">
    </div>  
  </a>


          </div>   

        <div class="contactUsMethodInfoContainer">
              <div class="phoneInfo">
                  <p>Some info about a phone.</p>
              </div>

              <div class="IMInfo">
                  <p>Some info about Social media</p>
              </div>

              <div class="emailInfo">
                  <p>Some info about emails.</p>
              </div>
          </div>

CSS

 .contactUsContainer{
    display: flex;
    align-items: center;
    height: 100%;
}

.ContactUsBox{
    width: 25%;
    height: 100%;
    margin: auto;
}


.emailIconBox{
    width: 25%;
    height: 100%;
    margin: auto;
}

.IMBox {
    width: 25%;
    height: 100%;
    margin: auto;
}

.contactUsMethodInfoContainer {
    display: flex;
    align-items: center;
    height: 100%;
}

.phoneInfo{
    width: 25%;
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.IMInfo{
    width: 25%;
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.emailInfo{
    width: 25%;
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

Ответы [ 3 ]

1 голос
/ 28 января 2020

Ваш contactUsContainer настроен на flex, и flex всегда действует на его непосредственных потомков. До тегов дети были ContactUsBox, emailIconBox и IMBox. Как только вы добавили теги a, теги a стали непосредственными потомками. Чтобы решить эту проблему, вам нужно добавить нужные свойства в теги a: 

.contactUsContainer {
  display: flex;
  align-items: center;
  height: 100%;
}

a {
  width: 25%;
  height: 100%;
  margin: auto;
}

.contactUsMethodInfoContainer {
  display: flex;
  align-items: center;
  height: 100%;
}

.phoneInfo {
  width: 25%;
  height: 100%;
  margin: auto;
  text-align: center;
  padding-top: 1.5%;
}

.IMInfo {
  width: 25%;
  height: 100%;
  margin: auto;
  text-align: center;
  padding-top: 1.5%;
}

.emailInfo {
  width: 25%;
  height: 100%;
  margin: auto;
  text-align: center;
  padding-top: 1.5%;
}
<div class="contactUsContainer">
  <a href="">
    <div class="ContactUsBox">
      <img src="https://img.icons8.com/plasticine/48/000000/phone.png">
    </div>
  </a>


  <a href="">
    <div class="emailIconBox">
      <img src="https://img.icons8.com/nolan/48/email.png">
    </div>
  </a>


  <a href="">
    <div class="IMBox">
      <img src="https://img.icons8.com/android/48/000000/computer.png">
    </div>
  </a>


</div>

<div class="contactUsMethodInfoContainer">
  <div class="phoneInfo">
    <p>Some info about a phone.</p>
  </div>

  <div class="IMInfo">
    <p>Some info about Social media</p>
  </div>

  <div class="emailInfo">
    <p>Some info about emails.</p>
  </div>
</div>
1 голос
/ 28 января 2020

Поскольку вы используете display: flex, могу ли я предложить вам объединить width все вместе и вместо этого полагаться на свойства flexbox для управления вашим макетом?

Это так же просто, как добавить justify-content: space-around; к получить желаемый эффект:

https://jsfiddle.net/cu5k70e4/

CSS (ширина убрана у детей, justify-content применена у родителей): 

.contactUsContainer{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}

.ContactUsBox{
    height: 100%;
    margin: auto;
}


.emailIconBox{
    height: 100%;
    margin: auto;
}

.IMBox {
    height: 100%;
    margin: auto;
}

.contactUsMethodInfoContainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.phoneInfo{
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.IMInfo{
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}

.emailInfo{
    height: 100%;
    margin: auto;
    text-align: center;
    padding-top: 1.5%;
}
1 голос
/ 28 января 2020

Вам нужно присвоить тегам CSS, которые вы даете своим ... элементам Box. 

.contactUsContainer > a {
    width: 25%;
    height: 100%;
    margin: auto;
}

Или присвойте всем своим тегам класс и задайте стили таким образом 

<a class="linkBox" />
.linkBox {
    width: 25%;
    height: 100%;
    margin: auto;
}

Рабочая скрипка

...