Question

我得到了这个CSS布局：http://www.cssdesk.com/Lgg4q

HTML

<div id="wrap">        
        <div class="img-wrap">
            <img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
        </div>
        <div class="info">
            <p>Lorem</p>
            <p>ipsum</p>
        </div>

        <div class="img-wrap">
            <img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
        </div>
        <div class="info">
            <p>Lorem</p>
            <p>ipsum</p>
        </div>

        <div class="img-wrap">
            <img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
        </div>
        <div class="info">
            <p>Lorem</p>
            <p>ipsum</p>
        </div>        
    </div>

CSS

body {
    background-color: grey;
    font: 18px/ Times;
    color: black;
}

body, html {
    height: 100%;
    width: 100%;
}

p { text-align: justify; }


#wrap {
    width: 80%;
    margin-left: 10%;
    padding-top: 2%;
    position: absolute;
    font-size: 14px;
    background: yellow;
}

.info {
    margin-right: 5%;
    padding-top: 2%;
    float: left;
}


.img-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;

    float: left;
    margin-right: 1%;
    margin-top: 1%;
}

当您调整浏览器窗口（较小）的大小时，您可以看到div的行为基本上破坏了设计。如何处理这个问题？

我的想法是给#wrap一个高度，但这不会像它应该的那样。

Answer 1

我是这样做的。 http://jsfiddle.net/joplomacedo/TYjd5/（我无法弄清楚如何保存cssdesk中的更改，因此我将其转换为jsfiddle）

基本上，我添加了一个'包装器'，我在每个图像和信息块周围调用了块。我给了他们一个宽度并漂浮了他们。这样，当调整浏览器大小时，信息和图像总是在一起。

这是您正在寻找的行为吗？您希望在浏览器调整大小时发生什么？

Answer 2

当使用百分比时，

DIV元素表现不佳，或者我可以说它们不应该被使用。在这种情况下，您有两种选择：

以这样的方式设计您的页面，使其看起来没有响应浏览器的窗口大小调整。以这个网站为例。
调整浏览器窗口大小时，相应地调整容器大小。为此，您需要使用Media Css classes或jQuery。

Answer 3

您可以在min-width上使用#wrap并设置像素值以防止其破坏。

CSS浮动窗口调整大小：行为中断设计

3 个答案: