0
私は数時間どこでも検索しましたが、決して解決策を見つけませんでした。左にいくつかの要素を貼り付け、同じ行に整列したまま右に他の要素を貼り付けてください
私のフッターでは、1024 px以上の画面で要素を表示すると、要素は左に、他の要素は右にスクロールします。私はポジションを取ろうとしました：絶対的な左右の浮動小数ですが、私がそうするとすべてが崩壊するようです。
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：私は申し訳ありませんが、私のコードは、おそらく混乱です。私はそれを働かせるために多くのものを試しました、そして私は開発者ではありません。
フレキシボックスは完全にすべてのブラウザでサポートされていません - 特に何もIE。 – Beepye
@Beepye私は古いバージョンのIEをサポートする必要があるプロダクションサイトでFlexboxを使用します。場合によっては問題はありますが、一般的に回避策を使用して解決できます。これは役に立つリストです：https://github.com/philipwalton/flexbugs - 何でも、それはプロジェクトに依存します – sol
これは魅力のように働いた、ありがとう！しかし、他のブラウザで私の問題は何ですか？そして私はどうすれば回避できますか？ –