4 нижних колонтитула с простым CSS - PullRequest
Новая
       1

4 нижних колонтитула с простым CSS

0 голосов
/ 10 октября 2019

У меня есть нижний колонтитул с 4 столбцами, который использует float: left;. Я хочу использовать CSS Grid для отображения 4 столбцов без использования float:left;. Я пробовал grid-template-columns: 1fr 1fr 1fr 1fr; с float:left;, и он работает, но когда я удаляю float: left;, он ломается.

Вот изображение с float:left;

Когда я удаляюfloat:left;, вот как это выглядит enter image description here

.footer {
height: auto;
background-color: #006400;
width: 100%;
padding-top: 20px;
align-items: center;
justify-content: space-around;
color: #ffffff;
font-weight: 100;
}

.copyright {
color: #fff !important;
text-align: center;
font-size: 11px;
padding-top: 15px;
}

.footer-support-text-owned {
font-size: 10px;
padding-top: 15px;
margin-top: 20px;
color: #fff;
}

.footer-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
margin-top: 15px;
}

.column {
grid-template-columns: 1fr 1fr 1fr 1fr;
float: left;
width: 25%;
padding: 10px;
height: 300px;
}

.column-2,
.column-3,
.column-4 {
width: 25%;
margin-top: 10px;
padding-top: 10px;
}

@media (min-width: 768px) {
.footer-container {
    width: 750px;
    }
}

@media (min-width: 992px) {
.footer-container {
    width: 970px;
    }
}

@media (min-width: 1200px) {
.footer-container {
    width: 1170px;
    }
}
.footer-header {
color: #ffffff;
font-weight: 100;
}
.small-footer-header {
font-size: 12px;
color: #fff;
font-weight: 100;
}

.footer-support-text {
color: #EFF5EF;
font-size: 14px;
margin-top: 8px;
padding-top: 8px;
}

.footer-link {
color: #fff;
text-decoration: none;
}

.fcc-footer-logo {
width: 40px;
vertical-align: middle;
}

.row:after {
content: "";
display: table;
clear: both;
}
  <footer class="footer">
      <div class="row footer-container">
        <div class="column">
          <h3 class="footer-header"><img class="fcc-footer-logo" src="images/freeCodeCamp-logo.png" alt="freeCodeCamp Manila">freeCodeCamp Manila</h3>
          <p class="footer-support-text">We are not affiliated with freeCodeCamp.org and are an independent local community and study group.</p>
          <p class="footer-support-text-owned">freeCodeCamp Logo is owned by freeCodeCamp.org</p>
          <small class="copyright">
        &copy 2019 freeCodeCamp Manila
          </small>
        </div>
        <div class="column column-2">
          <h2 class="small-footer-header">freeCodeCamp</h2>
          <p class="footer-support-text">
            <a class="footer-link" href="https://learn.freecodecamp.org/" target="_blank" rel="noopener noreferrer">Curriculum</a>
          </p>
          <p class="footer-support-text">
            <a class="footer-link" href="https://www.freecodecamp.org/news" target="_blank" rel="noopener noreferrer">News</a>
          </p>
          <p class="footer-support-text">
            <a class="footer-link" href="https://www.freecodecamp.org/forum/" target="_blank" rel="noopener noreferrer">Forum</a>
          </p>
        </div>
        <div class="column column-3">
          <h2 class="small-footer-header">Connect with us</h2>
          <p class="footer-support-text">
            <a class="footer-link" href="https://www.facebook.com/freeCodeCamp.Manila/" target="_blank" rel="noopener noreferrer">Facebook Page</a>
          </p>
          <p class="footer-support-text">
            <a class="footer-link" href="https://www.facebook.com/groups/free.code.camp.manila/" target="_blank" rel="noopener noreferrer">Facebook Group</a>
          </p>
          <p class="footer-support-text">
            <a class="footer-link" href="https://github.com/fccManila" target="_blank" rel="noopener noreferrer">GitHub</a>
          </p>
        </div>
        <div class="column column-4">
          <h2 class="small-footer-header">Other freeCodeCamp Communities</h2>
          <p class="footer-support-text">
            <a class="footer-link" href="https://www.facebook.com/groups/584419352008720/" target="_blank" rel="noopener noreferrer">freeCodeCamp Tarlac</a>
          </p>
        </div>
      </div>
    </footer>

1 Ответ

2 голосов
/ 10 октября 2019
  • Переместить grid-template-columns: в .footer-container
  • Добавить display: grid в .footer-container

.footer-container {
  background-color: green; /* Optional */
  display: grid;
  grid-gap: 1rem; /* Optional */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 1rem; /* Optional */
}

.column {
  background-color: yellow; /* Optional */
  padding: 1rem; /* Optional */
}
<footer class="footer">
  <div class="row footer-container">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
  </div>
</footer>
...