Question

我需要一个滚动条（响应式），它有六个矩形的附件。每个rectlangle的大小是页面大小的1/4。

我写这段代码：

<!DOCTYPE html>
<html>
<link href="Content/bootstrap.css" rel="stylesheet" />
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        html, body { height: 100%; width: 100%; margin: 0; }
        .rows{
            height:33.333333333333333333%;
        }
        .cols{
            width:25%;
            float:right;
            height:100%;
            background-color:red;
            border:solid;
             font-size: 2.2vw;
             text-align:center;
             vertical-align:bottom;
            border-color:black;
        }
    </style>
</head>
<body>
    <div class="rows" >

        sadfsadf
    </div>
    <div class="rows" style="width:150%;overflow-x:scroll;overflow-y:scroll;">
        <div class="cols">salam</div>
        <div class="cols">salam</div>
        <div class="cols">salam</div>
        <div class="cols">salam</div>
        <div class="cols">salam</div>
        <div class="cols">salam</div>


    </div>
    <div class="rows">

    </div>
</body>
</html>

但我的代码有以下输出：

任何想法？

Answer 1

我在您的代码段中修改了以下内容

避免在bootstrap上编写自定义样式＆＃34; .row＆＃34; - 而是有一个包装器div
浮动不会按预期计算宽度，因为它们向左或向右冲洗。尝试使用＆＃34; display：inline-block＆＃34;，它可以给出预期的结果。

＆＃13;

html,
body {
  height: 100%;
  min-height: 100%;
  width: 100%;
  margin: 0;
  width: 100%;
}
.rows {
  height: 33.333333333333333333%;
}
.cols {
  width: 25vw;
  height:25vw;
  /*float: right;*/
  /*height: 100%;*/
  background-color: red;
  border: solid;
  font-size: 2.2vw;
  text-align: center;
  vertical-align: middle;
  border-color: black;
  display: inline-block;
}
.mywrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

  <div class="rows">

    sadfsadf
  </div>
  <div class="mywrapper">
    <div class="rows">
      <div class="cols">salam</div>
      <div class="cols">salam</div>
      <div class="cols">salam</div>
      <div class="cols">salam</div>
      <div class="cols">salam</div>
      <div class="cols">salam</div>
    </div>
  </div>
  <div class="rows">

  </div>

＆＃13;

Answer 2

首先将正文中的行放在中心，您可以使用Flexbox和align-items: center。在获取水平滚动旁边，您可以在行上使用overflow-x: auto和white-space: nowrap。最后，为了制作.cols完美的正方形，您可以将宽度和高度设置为相同的vw尺寸。

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  display: flex;
  align-items: center;
}
.rows {
  overflow-x: auto;
  white-space: nowrap;
}
.cols {
  width: 25vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  height: 25vw;
  background-color: red;
  border: 1px solid black;
  max-height: 100vh;
}

<div class="rows">
  <div class="cols">1</div><!--
  --><div class="cols">2</div><!--
  --><div class="cols">3</div><!--
  --><div class="cols">4</div><!--
  --><div class="cols">5</div><!--
  --><div class="cols">6</div>
</div>

Answer 3

＆＃13;

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0; font:16px/20px sans-serif;}


.horizScroll{
  position: relative;
  overflow: auto;
  height: 33.333%;
  background: #444;
  white-space: nowrap; /* left align inner boxes */
  font-size: 0; /* remove gaps */
}

.horizScroll > div{
  width: 25%;
  height: 100%;
  background: red;
  display: inline-block;
  vertical-align: top; /* due to inline-block */
  white-space: normal; /* reset */
  font-size: 16px;      /* reset */
  text-align: center;
  border: 4px solid #000;
}

＆＃13;

<div class="horizScroll">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

＆＃13;

您现在可以将.horizScroll放在任何需要的地方（例如.rows内）

水平响应滚动条

3 个答案: