Responsive Fußzeile mit 3 Spalten

Question

Ich versuche, eine Fußzeile, die mit drei Spalten (die beiden oberen Spalten sind nebeneinander als Vollbild) zu erstellen. Wenn das Fenster in der Größe geändert wird, sollten die drei Spalten ihre Position ändern, so dass sie sich jeweils auf einer Linie befinden.

Ich habe dies so weit: https://jsfiddle.net/mtwL5oj0/

HTML:

<div id="u-row"> 
    <ul> 
     <li>000-000-0000</li> 
     <li>text@text.com</li> 
     <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
     <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
     <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
     <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
    </ul> 
</div> 

<div id="l-row"> 
    <ul> 
     <li>© 2017 text</li> 
     <li>ALL RIGHTS RESERVED.</li> 
     <li>PRIVACY POLICY.</li> 
    </ul> 
</div> 

CSS:

#u-row { 
    float: center; 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
} 
#u-row ul { 
    list-style: none; 
    margin: 0 auto; 
} 
#u-row ul li{ 
    display: inline-block; 
    padding-right: 30px; 
    color: #000; 
    font-size: 14px; 
    font-family: 'Open Sans', sans-serif; 
    letter-spacing: 1.5px; 
} 
#l-row { 
    float: left; 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
    padding-top: 15px; 
    padding-bottom: 60px; 
} 
#l-row ul { 
    list-style: none; 
    margin: 0 auto; 
} 
#l-row ul li{ 
    display: inline-block; 
    padding-right: 10px; 
    color: #000; 
    font-size: 10px; 
    font-family: 'Open Sans', sans-serif; 
    letter-spacing: 3px; 
} 

Wenn Sie die Bilder überprüfen Sie sehen, wenn die Fenster Ändern der Größe, die sie don‘ t mache zusammen einen Zeilenumbruch. Ich habe versucht, eine weitere Spalte zu erstellen, aber dann kann ich nicht die erste und zweite Spalte nebeneinander sehen, wenn das Fenster Vollbild ist.

Irgendwelche Tipps/Lösungen?

Answer 1

Versuchen Sie, diese

<div id="u-row"> 
      <div>000-000-0000</div> 
      <div>text@text.com</div> 
      <div> 
       <ul> 
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
       </ul> 
      </div> 
     </div> 

     <div id="l-row"> 
     &copy; 2017 text ALL RIGHTS RESERVED. PRIVACY POLICY. 
     </div> 

#u-row { 
    display: flex; 
    justify-content: center; 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
    flex-wrap: wrap; 
} 

#u-row > div { 
    padding: 0 15px; 
} 

@media screen and (max-width: 700px) { 
    #u-row > div { 
     width: 100%; 
     text-align: center; 
     padding-bottom: 10px; 
    } 
    #u-row { 

    } 
} 

#u-row ul { 
    list-style: none; 
    margin: 0 auto; 
} 

#u-row ul li{ 
    display: inline-block; 
    padding-right: 30px; 
    color: #000; 
    font-size: 14px; 
    font-family: 'Open Sans', sans-serif; 
    letter-spacing: 1.5px; 
} 

#l-row { 
    text-align: center; 
    padding-top: 15px; 
    padding-bottom: 60px; 
} 

#l-row ul { 
    list-style: none; 
    margin: 0 auto; 
} 

#l-row div { 
    display: inline-block; 
    padding-right: 10px; 
    color: #000; 
    font-size: 10px; 
    font-family: 'Open Sans', sans-serif; 
    letter-spacing: 3px; 
} 

Live-Demo - https://jsfiddle.net/grinmax_/mtwL5oj0/1/

Answer 2

Sie können ein reaktionsfähiges CSS-Framework wie Bootstrap verwenden, um dies schnell und einfach zu erreichen.

Andernfalls müssen Sie media queries verwenden, um die Regeln zu ändern, die auf verschiedenen Bildschirmgrößen angewendet werden.

Answer 3

Sie müssen nur die jeweils oberen zwei Spalten in div wickeln und legen display: inline-block; für diese divs:

.lcol, .rcol { 
 
    display: inline-block; 
 
} 
 
#u-row { 
 
    float: center; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
#u-row ul { 
 
    list-style: none; 
 
    margin: 0 auto; 
 
} 
 
#u-row ul li{ 
 
    display: inline-block; 
 
    padding-right: 30px; 
 
    color: #000; 
 
    font-size: 14px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    letter-spacing: 1.5px; 
 
} 
 
#l-row { 
 
    float: left; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    padding-top: 15px; 
 
    padding-bottom: 60px; 
 
} 
 
#l-row ul { 
 
    list-style: none; 
 
    margin: 0 auto; 
 
} 
 
#l-row ul li{ 
 
    display: inline-block; 
 
    padding-right: 10px; 
 
    color: #000; 
 
    font-size: 10px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    letter-spacing: 3px; 
 
}

<div id="u-row"> 
 
    <div class="lcol"> 
 
    <ul> 
 
\t \t <li>000-000-0000</li> 
 
\t \t <li>text@text.com</li> 
 
\t </ul> 
 
    </div> 
 
    <div class="rcol"> 
 
\t <ul> 
 
\t \t <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
 
\t \t <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
 
\t \t <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
 
\t \t <li><img src="pic" alt="" style="width:19px;height:19px;"></li> 
 
\t </ul> 
 
    </div> 
 
</div> 
 
<div id="l-row"> 
 
    <ul> 
 
\t  <li>© 2017 text</li> 
 
\t \t <li>ALL RIGHTS RESERVED.</li> 
 
\t \t <li>PRIVACY POLICY.</li> 
 
    </ul> 
 
</div>