首页 文章

响应水平布局

提问于
浏览 次
2

我有一个宽度为水平布局：自动和高度：100％，但是身体或容器没有拉伸以保持我的图像的纵横比 .

我需要的布局如下图所示：

enter image description here

我将使用这些图像作为面板div的背景 .

这是我的代码：

HTML

<body>
      <div id="cover" class="panel">
      <img src=""/>
      </div>
      <div id="panel1" class="panel">
      <img src=""/>
      </div>
      <div id="panel2" class="panel">
      <img src=""/>
      </div>
      <div id="panel3" class="panel">
      <img src=""/>
      </div>
      <div id="panel4" class="panel">
      <img src=""/>
      </div>
 </body>

CSS

* {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    width: auto;
    height: 100%;
}

.panel {
    width: auto;
    height: 100%;
    float: left;
}

.panel img {
    width: auto;
    height: 100%;
    z-index: -1;
}

你也可以在这个jsfiddle看到它 .

我将.panel浮动到左边，所以它将全部水平显示，但是容器不能容纳所有面板的宽度，它们只是堆叠在一起 .

注意：我不希望有一个固定的，我需要它来响应 .

这是我想要完成的一个例子（jsfiddle） .

如您所见，没有垂直滚动条只显示水平滚动条，当您调整视口大小时，图像会调整其宽度和高度并保持其纵横比 .

html css layout

4 回答

  • 0

    这是您原始小提琴的更新：http://jsfiddle.net/rsPRz/45/

    尽量保持尽可能接近原始代码......

    HTML

    <html>
<body>
    <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-cover.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-2.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-1.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-1.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-2.jpg"/>
</body>
</html>

    CSS

    * {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}

img {
    display: inline-block;
}
    回复于
  • 0

    我认为你需要将它们全部保存在父div中，其宽度和高度将等于窗口的宽度和高度

    回复于
  • 1

    您显示的示例工作正常，因为它具有单个图像 . 当您使用多个图像/ div时，您应该为div分配相等的宽度，并为其中的图像赋予 max-width:100% .

    例如，我只使用了4个div . 查看此演示http://jsfiddle.net/rsPRz/34/

    回复于
  • 2

    有了 div.container 和jQuery的一些帮助，你可能会相处得很好 .

    更新链接：http://jsfiddle.net/rsPRz/37/

    widthSum = 0;
$('.panel img').each(function() {
   widthSum += $(this).width(); 
});
$('.container').width(widthSum);

    这可能是您的解决方案吗？

    回复于

相关问题