水平响应滚动条

我需要一个滚动条（响应），有六个矩形像附件。每个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>

，但我的代码如下输出：

什么想法？

来源

2016-08-07 Mahdi_Nine

我已经修改了下面的代码片段

避免写您的自定义样式在引导“.row” - 相反有围绕它的包装div
浮动将不会按预期计算宽度，因为这些浮动会刷新到左侧或右侧。尝试使用“display：inline-block”，它可以给出预期的结果。

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; 
 
}

<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>

来源

2016-08-07 19:17:15

感谢您和+1你的答案 –

*{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; 
 
}

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

现在，您可以将.horizScroll你需要的地方（如IE里面.rows）

来源

2016-08-07 19:16:35

首先居中身体行，你可以使用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>

来源

2016-08-07 19:22:26

水平响应滚动条

回答

相关问题