Question

你好，我想做一些类似下面的事情。更确切地说，我有一个div和一个无序列表。我正在寻找一种适合框的方法（如果3个或3个以上）具有相同的尺寸（以响应）。如果年龄在3岁以下，我只想拥有相同的尺寸，但是如果不合适的话也可以。

 ----------------------------
  parent
    | |-----------||------|
    | |           ||  li  |
    | |           ||      |
    | |           ||------|
    | |           ||------|
    | |           ||  li  |
    | |    div    ||      |
    | |           ||------|
    | |           ||------|
    | |           ||  li  |
    | |           ||      |
    | |           ||------|
    | |------------
    ---------------------------



 ----------------------------
  parent
    | |-----------||------|
    | |           ||  li  |
    | |           ||      |
    | |           ||------|
    | |           ||------|
    | |           ||  li  |
    | |    div    ||      |
    | |           ||------|
    | |           |
    | |           |
    | |           |
    | |           |
    | |------------
    ---------------------------

Answer 1

尝试一下：

<div class="parent">
    <div class="content">
    </div>
    <div class="boxes-list">
        <span class="box"></span>
        <span class="box"></span>
        <span class="box"></span>

    </div>
</div>

<style>
    .parent {
        width: 70vw;
        height:80vh;
        background: red;
        display: flex;
        border: 5px solid black;
    }

    .content {
        flex: 7;
        border: 5px solid yellow;
    }

    .boxes-list {
        flex: 3;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
    }

    .box {
        width: 100%;
        height: 100%;
        background: black;
        margin: 1px;
        max-height: 245px;
    }
</style>

您可以添加或删除复选框。控制内容的宽度，更改“ content”类的flex属性值

Answer 2

您可以为此目的使用flexbox

.parent {
  display: flex;
  flex-direction: row;
  width: 50%;
  height: 500px;
  background-color: #ccc;
  padding: 10px;
}

.box {
  flex-grow:1;
  height: 100%;
  background-color: red;
}
.nav {
  display:flex;
  flex-direction:column;
  flex-grow:1;
  height:100%;
  list-style-type:none;
  background-color:green;
  margin:0;
  padding:0;
}
.nav li {
  flex-grow:1;
  align-items: stretch;
  background-color: pink;
  margin:10px;
}

<body>
  <div class="parent">
    <div class="box">
    </div>
    <ul class="nav">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>

通过父大小自动调整许多<li>的大小

2 个答案: