Question

我试图构建一个简单的响应式页面，在页面中央有3个方块，如果我们重新调整窗口，它们将保持方形。

以下是我想做的事情：

我在物质化的角度环境中构建此页面，以简化我的问题，这是我当前实现的再现：

<div class="container-wrapper">
  <div class="container">
    <div style="height: 100%; width:100%">
    <ul class="list-group-horizontal">
      <li class="list-group-item">
        <div class="item-wrapper">
            <i class="material-icons pointer">play_arrow</i>
        </div>
      </li>
      <li class="list-group-item">
        <div class="item-wrapper">
        </div>
      </li>
      <li class="list-group-item">
        <div class="item-wrapper">
        </div>
      </li>
    </ul>
    </div>
  </div>
</div>

我的Css：

.container-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 50;
}
.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    padding: 80px 0;
    height: 400px;
    text-align: center;
}


.list-group-horizontal {
    height: 100%;
}


.list-group-horizontal .list-group-item {
    display: inline-block;
}

.list-group-horizontal .list-group-item {
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
    border-right-width: 0;
    height: 100%;
    width: 33%;
}

.item-wrapper {
    vertical-align: middle;
    border: 2px solid #1563aa;
    background: rgba(33, 33, 33, 0.48);
    border-radius: 5px;
    width: 15vw; 
    height: 15vw;
    margin: auto;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

.item-wrapper:hover {
   background-color: rgba(255, 255, 255, 0.4);
}

另外，我想将图像（play_arrow）置于div的中心

我在css上苦苦挣扎，我觉得我的css代码不是那么干净，如果你对我的问题有任何暗示或者我现在的css的最佳解决方案随时可以回答：）

由于

Answer 1

我不想发布非常原创的内容（我的回答是第二个），但这里是flex版本，而不是网格。

简单地说，网格用于对齐大面积布局，而当你需要对齐一些小东西时，flex通常更好，比如标题中的3个按钮。但是，您仍然可以使用flex来创建整体布局，而不使用网格。例如，Chrome内部书签管理器以这种方式创建。

另外，在谈论flex和CSS网格时，你应该注意到CSS网格在CSS世界中是一种非常新的动物，如果你考虑与旧浏览器的兼容性，flex会更好;比较Flexbox和CSS-grid的浏览器支持。

<强> Test

<div id="boxes">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

<style>
#boxes {
    width:100%;
    display: flex;
}

#boxes .box {
    height: 90px;
    margin: 20px;
    width: 90px;
    line-height: 90px;
    text-align: center;
    border: 1px solid Black;
}
</style>

Answer 2

这样可行：

#boxes {
width:300px;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
text-align:center;

}

#boxes .box {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 1px solid Black;
}

<div id="boxes">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

中心DIV＆amp;响应

2 个答案: