3列的響應頁腳

Question

我正在嘗試創建一個三列的列表（頂部兩列在全屏時並排排列）。當窗口被調整大小時，三列應該改變位置，以便它們分別位於一行上。

我有這個至今：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; 
} 

如果檢查出的圖像調整功能，他們不窗戶時，你會看到」不要一起休息。我試圖再創建一個列，但當窗口全屏時，我無法並排獲取第一列和第二列。

任何提示/解決方案？

Answer 1

試試這個

<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; 
} 

現場演示 - https://jsfiddle.net/grinmax_/mtwL5oj0/1/

Answer 2

您可以使用響應式CSS框架（如Bootstrap）來快速輕鬆地實現此目的。

否則，您將需要使用media queries更改應用於不同屏幕尺寸的規則。

Answer 3

你只需要每上兩列包裝成div，併爲這些div display: inline-block;：

.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>