Question

大家好！我在这里面临一些挑战。基本上，我就是这个场景......

宽度固定的侧栏
具有固定宽度和高度的容器，其中一行中容器的数量必须与屏幕上的可用宽度一致
容器上的另一个div，其中宽度始终必须与容器的宽度相匹配在一个增长中（这是挑战本身） - 查看图片并注意灰点。
当我调整屏幕大小时，容器必须在空间不足时换行

我做了很多尝试让绿色盒子与蓝色容器对齐。此外，我不确定这是否是做这些事情的最佳方法。我创建了#group div，期望让topper自动对齐。此外，容器的底部和右侧边缘看起来像一个网格，所以我不确定它是否是执行此操作的最佳方式 - 我试图说：我们可以更改任何内容，除了：主div必须存在，侧栏必须存在，固定宽度的东西必须保持固定宽度。

以下是代码，但您可以看到它在plunker

运行

<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<style>
    body,
    html {
        width: 100%;
        height: 100%;
        background-color: black;
        margin: 0;
    }

    #app {
        width: 100%;
    }

    #sideBar {
        background-color:red;
        width: 300px;
        float: left;
        height: 2000px;
    }

    #master {
        padding: 10px;
        margin-left: 300px;
    }

    #group {

    }

    #topper {
        height: 30px;
        background-color: green;
        margin-bottom: 20px;
        width: inherit;
    }

    .containers {
        background-color: blue;
        width: 300px;
        height: 300px;
        margin-right: 20px;
        margin-bottom: 20px;
        float: left;
    }
</style>
</head>

<body>
<div id="app">
    <div id="sideBar"></div>
    <div id="master">
        <div id="group">
            <div id="topper"></div>
            <div class="containers"></div>
            <div class="containers"></div>
            <div class="containers"></div>
            <div class="containers"></div>
            <div class="containers"></div>
            <div class="containers"></div>
            <div class="containers"></div>
            <div class="containers"></div>
            <div class="containers"></div>
            <div class="containers"></div>
        </div>
    </div>
</div>
</body>
</html>

另一种调整大小的方案：重要的是：容器总是固定宽度，在一行中显示尽可能多的容量，最重要的是：绿色div总是与下面的容器对齐。

Answer 1

如果我弄错了，这就是你所追求的（假设你可以通过calc设置蓝框的宽度和高度）。

flexbox和calc在这里派上用场，因为他们可以做出艰苦的努力。我已将max-width上的.right-container设置为75％，以显示它正在做什么。

您可以将蓝框的width设置为50％，但是您还需要将padding-bottom更改为50％。

body {
  background: black;
  margin: 0;
  padding: 0;
}

.left-container {
  background: red;
  position: fixed;
  left: 0;
  top: 0;
  width: 100px;
  height: 100%;
}

.right-container {
  margin-left: 120px;
  max-width: 70%;
  width: auto;
  display: flex;
  flex-flow: column wrap;
}

.top-box {
  width: 100%;
  background: lime;
  height: 50px;
}

.list-boxes {
  list-style: none;
  margin: 10px -10px;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: stretch;
}

.box-item {
  background: blue;
  flex-basis: calc(100% /3);
  padding-bottom: calc(100%/3);
  border: 10px solid black;
  box-sizing: border-box;
}

<div class="wrapper">

  <div class="left-container">

  </div>

  <div class="right-container">

    <div class="top-box">

    </div>

    <ul class="list-boxes">
      <li class="box-item">
        <div class="box">

        </div>
      </li>
      <li class="box-item">
        <div class="box">

        </div>
      </li>
      <li class="box-item">
        <div class="box">

        </div>
      </li>
      <li class="box-item">
        <div class="box">

        </div>
      </li>
      <li class="box-item">
        <div class="box">

        </div>
      </li>

    </ul>

  </div>

</div>

css3 - 在响应网格中对齐对象

1 个答案: