Question

对于容器内的每个盒子以及所有设备尺寸，我需要并排显示相同的100％宽度的盒子。现在以下工作，它显示了我所追求的，但是这个解决方案不适用于实际的物理设备，如平板电脑和智能手机，我不知道为什么，但是可以更改我的代码，以便效果实际显示如何设计在物理设备上（而不仅仅是在我的浏览器中并调整浏览器的大小以查看效果）？

.box2 {
  margin: 5px 5px 5px 0;
  text-align: center;
  float: left;
  background-color: #FFF;
  color: #000;
  border: 2px solid #A10000;
  height: auto;
  width: calc((100% / 2) - 5px);
  box-sizing: border-box;
  font-size: 12px;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (min-width: 768px) {
  .box2 {
    width: calc((100% / 3) - 5px);
  }
}
@media screen and (min-width: 992px) {
  .box2 {
    width: calc((100% / 6) - 5px);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a>
      <a href="#" class="box2 dfs-2-sm" title="2"><h1>2</h1></a>
      <a href="#" class="box2 dfs-3-sm" title="3"><h1>3</h1></a>
      <a href="#" class="box2 dfs-4-sm" title="4"><h1>4</h1></a>
      <a href="#" class="box2 dfs-5-sm" title="5"><h1>5</h1></a>
      <a href="#" class="box2 dfs-6-sm" title="6"><h1>6</h1></a>
    </div>
  </div>
</div>

Answer 1

将.row的div子项（第三个div）的显示设置为flex，如下所示：

.container > .row > div {
    display: flex;
}

Answer 2

继承人可以使用弹性框来实现这一目标，这将创建一个独立于平台的渲染，您可以确保它可以在任何地方工作：

FlexBox设置的CSS代码

<!DOCTYPE html>

<html>
<head>
  <title></title>
</head>

<body>
  <center>
    <div id="flexcanvas">
      <div id="container" class="flexChild rowParent">
        <div class="flexChild" id="box1">
          <h1>Box #1</h1>
        </div>

        <div class="flexChild" id="box2">
          <h1>Box #2</h1>
        </div>

        <div class="flexChild" id="box3">
          <h1>Box #3</h1>
        </div>

        <div class="flexChild" id="box4">
          <h1>Box #4</h1>
        </div>

        <div class="flexChild" id="box5">
          <h1>Box #5</h1>
        </div>

        <div class="flexChild" id="box6">
          <h1>Box #6</h1>
        </div>
      </div>
    </div>
  </center>


<style>
#flexcanvas {
    width: 100%;
    height: 600px !important;
}
.rowParent,
.columnParent {
    display: flex;
    /* wrapping flex boxes causes platform independent arrangement*/
    
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    flex-direction: row;
    /* webkit-based browser support */
    
    display: -webkit-flex;
    display: -webkit-box;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -webkit-align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    /* MS-based browser support */
    
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: start;
    -ms-flex-align: stretch;
    -ms-flex-line-pack: stretch;
}
.columnParent {
    flex-direction: column;
    /* webkit-based browser support */
    
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    /* MS-based browser support */
    
    -ms-flex-direction: column;
}
.flexChild {
    flex: 1;
    align-self: auto;
    padding: 20px;
    border: 1px black solid;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -webkit-align-self: auto;
    -ms-flex: 1;
    -ms-flex-item-align: auto;
}

</style>
    </body>
</html>

上面的代码片段基本上创建了灵活的盒子，可以变形以适应任何设备，无论大小，都可能是最好的方式。

在查看设备上显示的页面方面，请尝试在大多数现代浏览器的开发者工具中使用“响应式设计视图”选项。

享受。

在所有设备上并排显示全宽的框

2 个答案: