嗨我试图做一个与li响应的网站，但它很难实现它。我想要做的是每个leftContainer和rightContainer都有多个li箱子，最多连续3个箱子。当我减少窗口宽度的大小，我希望他们能够成为2盒中的每一个行，当我减少更多，例如，ul和li的响应式布局 - 窗口宽度CSS

if($(window).width() <= 700) { 
    // 1 li box each for both leftContainer and rightContainer }

这样的事情。下面的是，如果你想响应的元素，我已经写了

http://codepen.io/hk0424/pen/womQxq

来源

2016-12-06 H.Kim

你有没有考虑过使用媒体查询或引导类呢？ – Taplar

你应该看看使用'display：flex;' - 它几乎做你想做的事情。 – junkfoodjunkie

@junkfoodjunkie在所有浏览器中不支持display：flex。所以如果你想实现跨界解决方案，那么'display：flex'不是一个好选择。请参阅此链接（http://caniuse.com/#search=flex）以供参考。 –

避免固定宽度的代码。

您必须避免给定固定宽度以使元素响应。为了实现你想要的结果，您可以按如下改变里的CSS：

html { 
    text-align: center; 
} 

#container { 
    display: inline-block; 
    max-width: 100%; 
    text-align: center; 
} 

#leftContainer{ 
    list-style: none; 
    float:left; 
    left:0px; 
    text-align: center; 
    margin: 0px auto; 
    padding: 0px; 
    display: inline-block; 
    width: 50%; 
    overflow: hidden; 
} 

#rightContainer { 
    float: right; 
    list-style: none; 
    margin: 0px auto; 
    padding: 0px; 
    text-align: center; 
    display: inline-block; 
    width: 50%; 
    overflow: hidden; 
    right:0px; 
} 

#leftContainer li, #rightContainer li{ 
    margin: 0px; 
    padding: 0px; 
    display: inline-block; 
    list-style: none; 

} 

.leftbox, .rightbox{ 
    background-color: grey; 
    width: 185px; 
    height: 150px; 
    margin: 5px; 

}

正如你可以看到我已经取代了在#container的最大宽度为最大宽度：100％。而对于内联元素，您不必编写margin: 0 auto来将它排列在中间，因为父元素上的text-align: center完全相同。

来源

2016-12-07 05:46:18

有没有什么办法可以通过jquery实现？ –

ul和li的响应式布局 - 窗口宽度CSS

回答

避免固定宽度的代码。

相关问题