css поле: автоматическая выдача в нижнем колонтитуле - PullRequest
Новая
       54

css поле: автоматическая выдача в нижнем колонтитуле

3 голосов
/ 15 февраля 2020

Моя проблема - разделить пространство внутри строки нижнего колонтитула на 3 части (каждая с одинаковой шириной) 

footer {
  width: 100%;
  /*breite: 100%*/
  padding: 0;
  margin: 0;
  background-color: darkcyan;
  /*Hintergrundfarbe*/
  margin-bottom: 0;
  bottom: 0;
}

.footer-items {
  width: 80%;
  margin: auto;
  display: flex;
  /*bringt alle Teile in eine Linie*/
  text-align: center;
  /*zentriert ganzen Text im footer*/
}
<div class="footer-items">

  <div class="company-items">
    <h3 class="company">Company</h3>
    <ul>
      <li><a href="text1.html">Text1</a></li>
      <li><a href="text2.html">Text2</a></li>
      <li><a href="text3.html">Text3</a></li>
    </ul>
  </div>

  <div class="social-items">
    <h3 class="social">Social</h3>
    <ul>
      <li><a>Twitter</a></li>
      <li><a>Instagram</a></li>
      <li><a>Reddit</a></li>
    </ul>
  </div>

  <div class="other-items">
    <h3 class="text">Text4</h3>
    <ul>
      <li><a>other1</a></li>
      <li><a>other2</a></li>
    </ul>
  </div>

</div>

Если я попытаюсь сделать что-то вроде margin-left: 33% для моих 3 элементов в нижнем колонтитуле, это не сработает.

спасибо за вашу помощь

Ответы [ 5 ]

1 голос
/ 15 февраля 2020

Попробуйте использовать width: 33.33% вместо margin-left: 33% и применить класс к каждой трети нижнего колонтитула. Это разделит нижний колонтитул на 3 столбца: 

.footer {
  width: 100%;
  /*breite: 100%*/
  padding: 0;
  margin: 0;
  background-color: darkcyan;
  /*Hintergrundfarbe*/
  margin-bottom: 0;
  bottom: 0;
}

.footer-column {
  float: left;
  width: 33.33%;
}
<div class="footer">

  <div class="footer-column">
    <h3 class="company">Company</h3>
    <ul>
      <li><a href="text1.html">Text1</a></li>
      <li><a href="text2.html">Text2</a></li>
      <li><a href="text3.html">Text3</a></li>
    </ul>
  </div>

  <div class="footer-column">
    <h3 class="social">Social</h3>
    <ul>
      <li><a>Twitter</a></li>
      <li><a>Instagram</a></li>
      <li><a>Reddit</a></li>
    </ul>
  </div>

  <div class="footer-column">
    <h3 class="text">Text4</h3>
    <ul>
      <li><a>other1</a></li>
      <li><a>other2</a></li>
    </ul>
  </div>

</div>
1 голос
/ 15 февраля 2020

Вы можете сделать это, используя свойства flex CSS, и я добавил фрагмент ниже. Пожалуйста, проверьте: 

footer{
            width: 100%; /*breite: 100%*/
            padding: 0;
            margin: 0;
            background-color: darkcyan; /*Hintergrundfarbe*/
            margin-bottom: 0;
            bottom: 0;
          }

          .footer-items{
            width: 80%;
            margin: auto;
            display: flex; /*bringt alle Teile in eine Linie*/
            text-align: center; /*zentriert ganzen Text im footer*/
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
          }

          .footer-items .company-items, .footer-items .social-items, .footer-items .other-items {
            display: block;
            width: 100%;
            text-align: left;
          }
    <div class="footer-items">
        <div class="company-items">
          <h3 class="company">Company</h3>
            <ul>
              <li><a href="text1.html">Text1</a></li>
              <li><a href="text2.html">Text2</a></li>
              <li><a href="text3.html">Text3</a></li>
            </ul> 
        </div>

        <div class="social-items">
          <h3 class="social">Social</h3>
            <ul>
              <li><a>Twitter</a></li>
              <li><a>Instagram</a></li>
              <li><a>Reddit</a></li>
            </ul>
        </div>

        <div class="other-items">
          <h3 class="text">Text4</h3>
            <ul>
              <li><a>other1</a></li>
              <li><a>other2</a></li>
            </ul>
        </div>
  </div>
0 голосов
/ 16 февраля 2020

установите ширину элементов div 33,33% ((100%) / количество столбцов) и установите отступ в 0px для правого и левого. 

footer {
  width: 100%;
  /*breite: 100%*/
  padding: 0;
  margin: 0;
  background-color: darkcyan;
  /*Hintergrundfarbe*/
  margin-bottom: 0;
  bottom: 0;
}

.footer-items {
  width: 100%;
  margin: auto;
  margin-right:0px;
  margin-left:0px;
  display: flex;
  /*bringt alle Teile in eine Linie*/
  text-align: center;
  /*zentriert ganzen Text im footer*/
}

.div-box{
  width:33.33%;
}
<div class="footer-items">

  <div class="company-items div-box">
    <h3 class="company">Company</h3>
    <ul>
      <li><a href="text1.html">Text1</a></li>
      <li><a href="text2.html">Text2</a></li>
      <li><a href="text3.html">Text3</a></li>
    </ul>
  </div>

  <div class="social-items div-box">
    <h3 class="social">Social</h3>
    <ul>
      <li><a>Twitter</a></li>
      <li><a>Instagram</a></li>
      <li><a>Reddit</a></li>
    </ul>
  </div>

  <div class="other-items div-box">
    <h3 class="text">Text4</h3>
    <ul>
      <li><a>other1</a></li>
      <li><a>other2</a></li>
    </ul>
  </div>

</div>
0 голосов
/ 15 февраля 2020

Вы пробовали использовать display: grid, вот так. Вы можете определить 3 столбца для каждого элемента нижнего колонтитула и дать ему ширину 1fr или 1 фракцию grid-template-columns:1fr 1fr 1fr;. Вы также можете определить разрыв сетки вместо поля.

0 голосов
/ 15 февраля 2020

Я вижу, что ваше .footer-items равно display: flex;, вы можете сделать так, чтобы его ближайшие дети росли равномерно.

Посмотрите на фрагмент. (Также вы можете удалить text-align: center;) 

footer {
  width: 100%;
  /*breite: 100%*/
  padding: 0;
  margin: 0;
  background-color: darkcyan;
  /*Hintergrundfarbe*/
  margin-bottom: 0;
  bottom: 0;
}

.footer-items {
  width: 80%;
  margin: auto;
  display: flex;
  /*bringt alle Teile in eine Linie*/
  /*text-align: center;*/
  /*zentriert ganzen Text im footer*/
}

.footer-items > div {
  flex-grow: 1;
}
<div class="footer-items">

  <div class="company-items">
    <h3 class="company">Company</h3>
    <ul>
      <li><a href="text1.html">Text1</a></li>
      <li><a href="text2.html">Text2</a></li>
      <li><a href="text3.html">Text3</a></li>
    </ul>
  </div>

  <div class="social-items">
    <h3 class="social">Social</h3>
    <ul>
      <li><a>Twitter</a></li>
      <li><a>Instagram</a></li>
      <li><a>Reddit</a></li>
    </ul>
  </div>

  <div class="other-items">
    <h3 class="text">Text4</h3>
    <ul>
      <li><a>other1</a></li>
      <li><a>other2</a></li>
    </ul>
  </div>

</div>
...