javascript - CSS3 Flex 布局右侧留空

标签 javascript html css flexbox

我使用 4 列布局。 每个 div 宽度为 25%。 右侧留空。 如何解决？

enter image description here 

body,html{margin:0;padding:0}.flexbox-slider{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:364px;visibility:hidden;margin:auto;padding-bottom:40px}.flexbox-slider .flexbox-slide img{position:absolute}.flexbox-slider .flexbox-slide{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-delay:0s;transition-delay:0s;width:25%;height:364px;position:relative;overflow:hidden;cursor:pointer;visibility:visible}.flexbox-slider .flexbox-slide:after{position:absolute;top:0;left:0;content:"";display:block;width:100%;height:100%;background-color:rgba(255,255,255,.6);z-index:2;opacity:0}.flexbox-slider .flexbox-slide img{osition:absolute;height:auto;width:auto;min-width:100%;min-height:100%;z-index:1}.flexbox-slider .flexbox-slide .text-block{position:absolute;left:30px;bottom:30px;max-width:400px;padding:20px;border-radius:5px;background-color:rgba(0,0,0,.6);color:#fff;z-index:4;visibility:hidden}.flexbox-slider .flexbox-slide .text-block h3{font-size:20px;font-weight:700}.flexbox-slider:hover .flexbox-slide:hover{-ms-flex-negative:0;flex-shrink:0;width:780px}.flexbox-slide .txt{z-index:89;position:absolute;bottom:-90%;left:0;width:100%;height:100%;display:block;padding:25% 50px 1px;color:#fff;transition:bottom 3s,background-color 0s;-moz-transition:bottom 3s,background-color 0s;-webkit-transition:bottom 3s,background-color 0s;-o-transition:bottom 3s,background-color 0s;-webkit-transition-property:background-color;-webkit-transition-duration:.5s;-webkit-transition-timing-function:ease}.flexslider,.slides li{height:650px}.flexbox-slide .txt span{width:85%;word-wrap:break-word;word-break:normal;display:block;margin-top:30px}.flexbox-slide p{font-size:18px;line-height:25px;color:#fff;font-weight:700}.flexbox-slide .txt:hover{bottom:-45%;background-color:rgba(0,0,0,.39)}.flexslider{position:relative;overflow:hidden;background:url(images/loading.gif) 50% no-repeat}.slides{position:relative;z-index:1}.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center}.flex-control-nav a,.flex-control-nav li{display:inline-block;width:14px;height:14px}.flex-control-nav li{margin:0 5px;zoom:1}.flex-control-nav a{line-height:40px;overflow:hidden;background:url(images/dot.png) right 0 no-repeat;cursor:pointer}.flex-control-nav .flex-active{background-position:0 0}.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%}.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute}.flex-direction-nav li a.flex-prev{left:40px;background:url(images/prev.png) center center no-repeat}.flex-direction-nav li a.flex-next{right:40px;background:url(images/next.png) center center no-repeat}

I use 4 column layout.
Every div Width is 25%.
Leaving empty space on the right.
How to fix it?
<html>
 <head></head>
 <body>
  <div class="flexbox-slider my-flexbox-slider" style=""> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> ... 
  </div>
 </body>
</html>

最佳答案

如果您的 HTML 中没有那些“...”，就没有那个空间了。

body,html{margin:0;padding:0}.flexbox-slider{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:364px;visibility:hidden;margin:auto;padding-bottom:40px}.flexbox-slider .flexbox-slide img{position:absolute}.flexbox-slider .flexbox-slide{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-delay:0s;transition-delay:0s;width:25%;height:364px;position:relative;overflow:hidden;cursor:pointer;visibility:visible}.flexbox-slider .flexbox-slide:after{position:absolute;top:0;left:0;content:"";display:block;width:100%;height:100%;background-color:rgba(255,255,255,.6);z-index:2;opacity:0}.flexbox-slider .flexbox-slide img{osition:absolute;height:auto;width:auto;min-width:100%;min-height:100%;z-index:1}.flexbox-slider .flexbox-slide .text-block{position:absolute;left:30px;bottom:30px;max-width:400px;padding:20px;border-radius:5px;background-color:rgba(0,0,0,.6);color:#fff;z-index:4;visibility:hidden}.flexbox-slider .flexbox-slide .text-block h3{font-size:20px;font-weight:700}.flexbox-slider:hover .flexbox-slide:hover{-ms-flex-negative:0;flex-shrink:0;width:780px}.flexbox-slide .txt{z-index:89;position:absolute;bottom:-90%;left:0;width:100%;height:100%;display:block;padding:25% 50px 1px;color:#fff;transition:bottom 3s,background-color 0s;-moz-transition:bottom 3s,background-color 0s;-webkit-transition:bottom 3s,background-color 0s;-o-transition:bottom 3s,background-color 0s;-webkit-transition-property:background-color;-webkit-transition-duration:.5s;-webkit-transition-timing-function:ease}.flexslider,.slides li{height:650px}.flexbox-slide .txt span{width:85%;word-wrap:break-word;word-break:normal;display:block;margin-top:30px}.flexbox-slide p{font-size:18px;line-height:25px;color:#fff;font-weight:700}.flexbox-slide .txt:hover{bottom:-45%;background-color:rgba(0,0,0,.39)}.flexslider{position:relative;overflow:hidden;background:url(images/loading.gif) 50% no-repeat}.slides{position:relative;z-index:1}.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center}.flex-control-nav a,.flex-control-nav li{display:inline-block;width:14px;height:14px}.flex-control-nav li{margin:0 5px;zoom:1}.flex-control-nav a{line-height:40px;overflow:hidden;background:url(images/dot.png) right 0 no-repeat;cursor:pointer}.flex-control-nav .flex-active{background-position:0 0}.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%}.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute}.flex-direction-nav li a.flex-prev{left:40px;background:url(images/prev.png) center center no-repeat}.flex-direction-nav li a.flex-next{right:40px;background:url(images/next.png) center center no-repeat}

I use 4 column layout.
Every div Width is 25%.
Leaving empty space on the right.
How to fix it?
<html>
 <head></head>
 <body>
  <div class="flexbox-slider my-flexbox-slider" style=""> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div>
  </div>
 </body>
</html>

关于javascript - CSS3 Flex 布局右侧留空，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49949982/

上一篇：html - 如何使用 Bootstrap 让一列跨越多行？

下一篇：css - col-lg 的不同行为

相关文章：

javascript - 在 JavaScript 中搜索数组映射的最有效方法

javascript - 一个字符串与另一个字符串重叠突出显示问题

css - 将 "glyphicon download-alt"图标分配给提交按钮

html - 对齐单行 CSS 上的列以创建切换标签

javascript - 更改html元素背景图像js

javascript - D3.js 创建动态 color() 函数

javascript - Auto DIV Scroller 脚本上的图形滚动条修改

css - 我可以在本身为 100% 高度的 DIV 中设置 100% 高度吗？

javascript - 将旧值作为 "ghost"thumb 添加到 &lt;input type ="range"> Slider

javascript - 如何在 JavaScript 函数中制作自定义提示框？

©2024 IT工具网  联系我们