0
J'ai cherché partout, pendant des heures, mais je n'ai jamais trouvé de solution.Coller des éléments à gauche et d'autres à droite tout en les alignant sur la même ligne
Dans mon pied de page, je veux que les éléments restent à gauche et les autres à droite quand on les voit sur un écran de 1024 px et plus. J'ai essayé de positionner: le flotteur absolu ET gauche/droit mais quand je le fais, tout semble s'effondrer.
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: Je suis désolé, mon code est probablement un gâchis. J'ai essayé beaucoup de choses pour le faire fonctionner, et je ne suis pas un développeur.
Flexbox est pas complètement pris en charge dans tous les navigateurs - en particulier tout IE. – Beepye
@Beepye J'utilise Flexbox sur des sites de production qui doivent supporter des versions plus anciennes d'IE. Parfois, il y a des problèmes mais ils peuvent généralement être résolus en utilisant des solutions de contournement. Ceci est une liste utile: https://github.com/philipwalton/flexbugs - Comme tout, cela dépend du projet – sol
Cela a fonctionné comme un charme, merci! Mais quels sont mes problèmes dans les autres navigateurs? Et comment je travaille? –