响应水平布局

时间:2012-09-26 10:10:33

标签: html css layout

我有一个水平布局,宽度为:auto和height: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)。

正如您所看到的那样,没有垂直滚动条只显示水平滚动条,当您调整视口大小时,图像会调整其宽度和高度并保持其宽高比。

4 个答案:

答案 0 :(得分:2)

以下是您原始小提琴的更新: 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;
}

答案 1 :(得分:1)

我认为您需要将所有这些内容保存在父div中,其宽度和高度将等于窗口宽度和高度

答案 2 :(得分:0)

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

我仅使用了4个div。查看此演示http://jsfiddle.net/rsPRz/34/

答案 3 :(得分:0)

使用div.container和jQuery的一点帮助你可能会相处。

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

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

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