將一些元素粘貼到左側，並將其他元素粘貼在同一行上

我已經搜索了幾個小時但從未遇到過的解決方案。將一些元素粘貼到左側，並將其他元素粘貼在同一行上

在我的頁腳中，當我們在1024像素及以上的屏幕上看到它時，我希望元素在左邊，其他人在右邊。我試圖定位：絕對和左/右浮動，但是當我這樣做時，一切似乎都崩潰了。

footer { 
 
\t background-color: #262524; 
 
\t text-align: center; 
 
\t margin-top: 2.4em; 
 
\t bottom: 0em; 
 
\t overflow: auto; 
 
} 
 
footer a { 
 
\t color: white; 
 
} 
 
footer a:hover { 
 
\t color: #006AEC; 
 
} 
 
.contact { 
 
\t width: 1.3em; 
 
\t height: auto; 
 
\t margin-right: 1em; 
 
\t display: none; 
 
} 
 
footer div { 
 
\t padding: 1em 0; 
 
\t color: white; 
 
\t font-weight: 200; 
 
} 
 
footer div ul { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t list-style-type: none; 
 
\t text-transform: uppercase; 
 
} 
 
.social { 
 
\t width: 2em; 
 
\t margin: 1em 0.3em; 
 
\t height: auto; 
 
\t display: inline; 
 
} 
 
.social:hover { 
 
\t opacity: 0.5; 
 
} 
 
.header { 
 
\t text-transform: uppercase; 
 
\t padding-top: 2em; 
 
\t font-weight: 400; 
 
\t font-size: 1.2em; 
 
\t color: white; 
 
\t display: block; 
 
\t width: 100vw; 
 
\t padding-bottom: 0.6em; 
 
} 
 
.copyright { 
 
\t background-color: #191919; 
 
} 
 
.copyright p { 
 
\t margin-top: 1em; 
 
} 
 
.gris { 
 
\t color: #999897; 
 
} 
 

 

 
@media (min-width: 1024px){ 
 
.inline { 
 
\t padding: 0; 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t vertical-align: top; 
 
\t width: 24.6%; 
 
} 
 
.floatLeft { 
 
\t float: left; 
 
} 
 
.floatRight { 
 
} 
 
footer .inline { 
 
\t margin-right: 1em; 
 
\t margin-left: 1em; 
 
\t width: auto; 
 
} 
 
.right { 
 
\t text-align: right; 
 
} 
 
.droit { 
 
} 
 
.left { 
 
\t text-align: left; 
 
} 
 
footer { 
 
} 
 
footer .right { 
 
} 
 
.contact { 
 
\t display: inline-block; 
 
} 
 
.header { 
 
\t text-align: left; 
 
\t 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:[email protected]">[email protected]</a></p></div> 
 
    </div> 
 
    
 
    
 
    <div class="inline right floatRight droit"> 
 
    \t <ul class="inline"> 
 
    \t <li><a href="index.html">Home</a></li> 
 
    \t <li><a href="about.html">About</a></li> 
 
    \t <li><a href="team.html">Out Team</a></li> 
 
    \t <li><a href="services.html">Services</a></li> 
 
    \t <li><a href="involvement.html">Involvement</a></li> 
 
    \t </ul> 
 
    \t <ul class="inline"> 
 
    \t <li><a href="contact.php">Contact Us</a></li> 
 
    \t <li><a href="gallery.html">Photo Gallery</a></li> 
 
    \t <li><a href="careers.php">Careers</a></li> 
 
    \t <li><a href="rateRequest.php">Rate Request</a></li> 
 
    \t <img src="../images/icon-facebook-white.svg" alt="" class="social"/> 
 
    \t <img src="../images/icon-google-plus-white.svg" alt="" class="social"/></ul> 
 
    \t 
 
    </div> 
 
    
 
    
 
    
 
<div class="copyright"> 
 
\t <p class="gris inline floatLeft">This webpage developed with assistance by NEOnet Inc.</p> 
 
\t <p class="inline floatLeft">Created by <a href="http://mariepierld.ca">Marie-Pier LD Design</a></p> 
 
\t <p class="inline">© 2017 HINCE TRANSPORT. All Rights Reserved</p> 
 

 
</div> 
 
</footer>

PS：我很抱歉，我的代碼可能是一個爛攤子。我嘗試了很多東西來使它工作，而我不是一個開發者。

來源

2017-08-04 mariepierld_

您可以添加clear屬性以確保清除浮動元素。您也可以使用flexbox來均勻分隔元素。

這個CSS添加到您的媒體查詢：

.copyright { 
    clear: both; 
    display: flex; 
    justify-content: space-between; 
    }

更多信息：

Float

Flexbox

片段

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) { 
 
    .copyright { 
 
    clear: both; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    } 
 
    .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:[email protected]">[email protected]</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>

來源

2017-08-04 15:35:12 sol

Flexbox的不完全支持所有瀏覽器 - 特別是任何IE。 – Beepye

@Beepye我在需要支持舊版本IE的生產站點上使用Flexbox。有時會出現問題，但通常可以使用解決方法來解決問題。這是有用的名單：https://github.com/philipwalton/flexbugs - 就像任何事情一樣，這取決於項目 – sol

這工作就像一個魅力，謝謝！但是在其他瀏覽器中我的問題是什麼？我該如何解決？ –

將一些元素粘貼到左側，並將其他元素粘貼在同一行上

回答

相關問題