Question

我有一个临时代码，可以在一个html中显示多个页面。我到了您只能显示一页的地方，并且可以在四页之间切换。但是，每当我尝试增加li的行数时，它就会超过屏幕。我怎样才能解决这个问题。基本上，它不会一直转到下一行，而是一直将它们水平添加。

cases.html

<div class="main_div">
                <div class="inner_div">
                    <a name="product"></a>
                    <ul id="Div1">
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li><br/>
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                    </ul>
                    <ul id="Div2" style="display: none;">
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                    </ul>
                    <ul id="Div3" style="display: none;">
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                    </ul>
                    <ul id="Div4" style="display: none;">
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                        <li>
                            <h2>Yeet</h2>
                            <img src="images/test.png">
                        </li>
                    </ul>
                </div>
                <div class="buttons">
                    <a href="#" onclick="divVisibility('Div1');">Page 1</a> | 
                    <a href="#" onclick="divVisibility('Div2');">Page 2</a> | 
                    <a href="#" onclick="divVisibility('Div3');">Page 3</a> | 
                    <a href="#" onclick="divVisibility('Div4');">Page 4</a>
                </div>
            </div>

style.css

.main_div{
    width: 900px;
    margin: auto;
}
.inner_div{
    width: 900px;
}
.inner_div ul{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
}
.inner_div ul li{
    width: 290px;
    flex: 0 1 auto;
    list-style-type: none;
}
.inner_div ul img{
    width: 200px;
    margin: 15px 45px;
    border: 3px solid black;
    border-radius: 10px;
}
.buttons{
    text-align: center;
}

pages.js

var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
  if(visibleDivId === divId) {
  } else {
    visibleDivId = divId;
  }
  hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
  var i, divId, div;
  for(i = 0; i < divs.length; i++) {
    divId = divs[i];
    div = document.getElementById(divId);
    if(visibleDivId === divId) {
      div.style.display = "flex";
    } else {
      div.style.display = "none";
    }
  }
}

Answer 1

只需添加到：

.inner_div ul { ... }

此：

flex-wrap: wrap;

这是因为flex的默认行为是让孩子们排成一行；

列表在x轴上永远持续

1 个答案: