0

我得到了这个 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一个高度，但这不会像它应该的那样工作。

4

3 回答 3

2

这就是我的做法。http://jsfiddle.net/joplomacedo/TYjd5/（我不知道如何在 cssdesk 中保存更改，所以我将其转移到 jsfiddle）

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

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

于 2012-07-07T18:27:53.090 回答
1

DIV元素在与百分比一起使用时表现不佳，或者我可以说它们不适合这样使用。在这种情况下，您有两种选择：

  1. 以这样的方式设计您的页面，使其看起来好像没有响应浏览器的窗口调整大小。以这个网站为例。

  2. 调整浏览器窗口大小时相应地调整容器大小。为此，您需要使用Media Css 类或 jQuery。

于 2012-07-07T18:18:06.417 回答
1

您可以使用min-widthon#wrap并设置一个像素值来防止它被破坏。

于 2012-07-07T18:19:48.197 回答