Блог

Главная - Вопросы по программированию - Размещайте разделы рядом друг с другом в нижнем колонтитуле. Как?

Размещайте разделы рядом друг с другом в нижнем колонтитуле. Как?

#html #css #footer

#HTML #css #нижний колонтитул

Вопрос:

У меня проблема с размещением моих разделов в одной строке внутри элемента нижнего колонтитула. Происходит то, что один div опускается, поэтому другие располагаются под ним. Вот мой html-код:

 <footer>
      <div class="footercontact">
        email@email.com<br />
        phone number<br />
        Street name Number<br />
        Postnumber
        </div>

        <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>         

    <div id="clockdiv">
        <div class="dayItem clockItem"></div>
        <div class="hourItem clockItem"></div>
    </div>
</footer>

Код CSS:

 footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px; 
}

.footercontact {
  text-align:left;
  width: 25%;
}

#clockdiv
{
    float: right;
}

Итак, по сути, я хочу, чтобы мой первый div, мои якорные элементы и второй div были рядом друг с другом в нижнем колонтитуле. Как мне этого добиться? Спасибо!

Комментарии:

1. css-tricks.com/snippets/css/a-guide-to-flexbox

2. Извините, я только что решил это, я думал, что написал float: left в первом div вместо text-align: left

Ответ №1:

 footer {
  display: flex;
}

footer > div {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 2em;
  color: white;
} 
 <footer>
  <div style="background-color: red">Address</div>
  <div style="background-color: green">Links</div>
  <div style="background-color: blue">Clock</div>
</footer>
Метки: