Question

首先：我真的试图找到一个答案，但不是他们为我工作。这是我的问题：

我有一个基本布局，我在页脚中有一个前进和后退按钮。这些按钮必须是二次的。所以我决定让它们变成简单的图像（以避免尝试按比例缩放div的所有问题）。

这些图片有CSS：

.galleryFooterController {
    position: relative;

    height: 100%;
    float: left;
    margin-left: 5px;

    background-color: #A0A0A0;
}

并嵌套在一个带有CSS的容器中：

#galleryFooterControlle {
    position: absolute;
    display: inline-block;
    right: 15%;
    background: white;
    height: 100%;
    padding-right: 5px;

    width: auto;
}

但是容器没有采用正确的宽度，因此图像不适合内部并且彼此渲染。如果我从图像中取出高度：100％，它们在容器中彼此相邻。

enter image description here

如果你能帮助我找到一个免费的JS版本来解决这个问题，那将是很棒的！谢谢！

Answer 1

这是一个FIDDLE，可以帮助您。

我没有制作所有divs阵容，但你可以改变CSS让它看起来更漂亮。

对于你的按钮，我只使用带有CSS-Tricks三角形的div中的div - 你可以在外部div上使用.click来运行你的功能。

这是相关的CSS

.header {
  width: 100%;
  height: 50px;
  background-color: #A0A0A0;
  border: 4px solid white;
}
.container {
  width: 90%;
  height: 400px;
  background-color: #A0A0A0;
  border: 4px solid white;
  float: left;
}
.rightbar {
  width: 9%;
  height: 460px;
  border: 1px solid white;
  float: right;
  background-color: #A0A0A0;    
}
.bottomholder {
  width: 90%;
  height: 50px;
  border: 1px solid black;
}
.bottomleft {
  height: 100%;
  width: 562px;
  float: left;
  background-color: #A0A0A0;
  border-left: 2px solid white;
}
.bottombutton {
  height: 100%;
  width: 130px;
  float: left;
  background-color: #A0A0A0;
  border-left: 2px solid white;
}
.bottomright {
  height: 100%;
  width: 200px;
  float: left;
  background-color: #A0A0A0;
  border-left: 2px solid white;
}
.arrowleft {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid white;
  background-color: #A0A0A0;
  float: left;
  margin-left: 10px;
}
.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent; 
  border-right: 15px solid black;
  margin-left: 8px;
  margin-top: 5px;
}
.arrowright {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid white;
  background-color: #A0A0A0;
  float: left;
  margin-left: 10px;
}
.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid black;
  margin-left: 15px;
  margin-top: 5px;
}

Answer 2

我尝试使用液体布局，删除边框2px白色并更改浮动属性。

.header {
        width: 98%;
        height: 50px;
        background-color: #A0A0A0;
        margin:2px 2px;
        }
.container{
        width: 85%;
        height: 400px;
        background-color: #A0A0A0;
        margin:2px 2px;
        float: left;
        }
.rightbar{
       width: 12%;
       height: 460px;
       float: left;
       background-color: #A0A0A0;
       margin-top:2px;
       margin-left: 2px;
      padding-left: 3px;
          }

完整代码http://jsfiddle.net/judearasu/5c5rq/

Answer 3

感谢大家，我想知道如何解决问题！因为图像不能彼此相邻渲染，因为它的容器在缩放图像后不会选择正确的宽度，所以我只是将容器宽度设置为我项目中85％的最大可用位置。所以现在图像适合！

再次感谢！

CSS容器适合Child-Images

3 个答案: