我的问题是将页脚栏内的空间分成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>
如果我尝试在页脚中为我的3个项目执行margin-left: 33%
之类的操作,将无法正常工作。
感谢您的帮助
您可以使用CSS的flex属性来实现,我在下面添加了代码段。请检查:
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>
尝试使用width: 33.33%
代替margin-left: 33%
,并将该类应用于页脚的每三分之一。这会将页脚分为三列:
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>