【发布时间】：2018-01-12 14:22:38
【问题描述】：
我已经在每个地方搜索了几个小时，但从未找到解决方案。
在我的页脚中，当我们在 1024 像素及以上的屏幕上看到元素时，我希望元素贴在左侧，其他元素贴在右侧。我试图定位：绝对和左/右浮动，但是当我这样做时，一切似乎都崩溃了。
footer {
background-color: #262524;
text-align: center;
margin-top: 2.4em;
bottom: 0em;
overflow: auto;
}
footer a {
color: white;
}
footer a:hover {
color: #006AEC;
}
.contact {
width: 1.3em;
height: auto;
margin-right: 1em;
display: none;
}
footer div {
padding: 1em 0;
color: white;
font-weight: 200;
}
footer div ul {
padding: 0;
margin: 0;
list-style-type: none;
text-transform: uppercase;
}
.social {
width: 2em;
margin: 1em 0.3em;
height: auto;
display: inline;
}
.social:hover {
opacity: 0.5;
}
.header {
text-transform: uppercase;
padding-top: 2em;
font-weight: 400;
font-size: 1.2em;
color: white;
display: block;
width: 100vw;
padding-bottom: 0.6em;
}
.copyright {
background-color: #191919;
}
.copyright p {
margin-top: 1em;
}
.gris {
color: #999897;
}
@media (min-width: 1024px){
.inline {
padding: 0;
display: inline-block;
position: relative;
vertical-align: top;
width: 24.6%;
}
.floatLeft {
float: left;
}
.floatRight {
}
footer .inline {
margin-right: 1em;
margin-left: 1em;
width: auto;
}
.right {
text-align: right;
}
.droit {
}
.left {
text-align: left;
}
footer {
}
footer .right {
}
.contact {
display: inline-block;
}
.header {
text-align: left;
padding-left: 1.6em;
}
}<footer>
<h6 class="header">Hince Transport</h6>
<div class="inline floatLeft">
<div class="inline left">
<p> 634, Jolin Street,<br>
Hearst, ON<br>
Canada<br><br>
P.O. Box 38<br>
P0L 1N0
</p>
</div>
<div class="inline left"><p>TOLL FREE <a href="tel:1-888-900-1658">1-888-900-1658</a><br><br>
<img src="../images/icon-phone-full.svg" alt="" width="32" height="32" class="contact"/><a href="tel:705-372-6111">705-372-6111</a><br>
<img src="../images/icon-fax-full.svg" alt="" width="32" height="32" class="contact"/>705-372-6110<br>
<img src="../images/icon-email.svg" alt="" width="32" height="32" class="contact"/><a href="mailto:ginoh@hincetransport.com">ginoh@hincetransport.com</a></p></div>
</div>
<div class="inline right floatRight droit">
<ul class="inline">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="team.html">Out Team</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="involvement.html">Involvement</a></li>
</ul>
<ul class="inline">
<li><a href="contact.php">Contact Us</a></li>
<li><a href="gallery.html">Photo Gallery</a></li>
<li><a href="careers.php">Careers</a></li>
<li><a href="rateRequest.php">Rate Request</a></li>
<img src="../images/icon-facebook-white.svg" alt="" class="social"/>
<img src="../images/icon-google-plus-white.svg" alt="" class="social"/></ul>
</div>
<div class="copyright">
<p class="gris inline floatLeft">This webpage developed with assistance by NEOnet Inc.</p>
<p class="inline floatLeft">Created by <a href="http://mariepierld.ca">Marie-Pier LD Design</a></p>
<p class="inline">© 2017 HINCE TRANSPORT. All Rights Reserved</p>
</div>
</footer>PS：对不起，我的代码可能是一团糟。我尝试了很多东西让它工作，我不是开发人员。
【问题讨论】：
标签： html css css-float css-position footer