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

Question

您好，我正在尝试用 li 制作一个响应式网站，但实现它真的很难。我想要做的是，每个 leftContainer 和 rightContainer 都有多个 li 框，最多 3 个连续框。当我减小窗口宽度的大小时，我希望它们每行变成 2 个框，当我减小更多时，例如，

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

是这样的。下面是我写的代码

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

Answer 1

如果你想让元素响应，请避免固定宽度。

您必须避免为使元素具有响应性而提供固定宽度。为了达到你想要的结果，你可以改变 li 的 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 也是如此。