Question

在调整浏览器窗口大小时，我的两个div之间没有问题。当窗口很宽时，div很好地坐在一起，但是当你将窗口调整到更窄的分辨率时，右边的div会在左边的那个下面： http://jsfiddle.net/za5X7/

我希望#sitelatestposts占据宽度空间的55％，并#siteinfos覆盖其余部分。

<div class="homepagediv">
    <div class="panel-grid-cell" id="sitelatestposts">
            <h1 class="blogtitle">Recent posts</h1>
            <ul>
                <li><a href=#><h5>Title 1</h5><p>Lorem ipsum</p></a></li>
                <li><a href=#><h5>Title 2</h5><p>Lorem ipsum</p></a></li>
                <li><a href=#><h5>Title 3</h5><p>Lorem ipsum</p></a></li>
            </ul>
    </div>
    <div class="panel-grid-cell" id="siteinfos">
            <h1>About the author</h1>

        <p>Contact 555-215-5548</p>
        <p>Lorem ipsum</p>

    </div>
</div>

CSS：

.homepagediv {
    zoom: 1;
   width: 100%;
}
.homepagediv h1, .homepagediv h2, .homepagediv h3, .homepagediv h4, .homepagediv h5, .homepagediv h6 {
    clear: none;
}
.panel-grid-cell {
    margin: 0 auto;
    padding: 0;
    float: left;
}
.blogtitle {
    padding: 0 0 0 10px;
    margin:0.5em 0 22px 0;
}
#sitelatestposts {
    width: 55%;
}
#sitelatestposts ul {
    padding: 0;
    list-style-type: none;
}
#sitelatestposts h5 {
    font-size: 14px;
}
#siteinfos {
    margin-right:10px;
}

你知道如何解决这个问题吗？谢谢！

Answer 1

添加

width:35%;

到#siteinfos {}

这应该等于100％（55％将转到#sitelatestposts）

http://jsfiddle.net/za5X7/5/

Answer 2

只需指定您的#siteinfos宽度即可。

在这种情况下，如果为#sitelatestposts指定55％，你可以为#siteinfos指定35％（一起这将等于90％）。

执行此操作时，您可以保持正确的保证金。

但是，如果您为#siteinfos指定45％并保持您的保证金权限，则这将超过100％（100％+ 10px），因此它们不会彼此相邻。

Answer 3

我刚删除了#siteinfos的页边右侧，并将宽度设置为45％。

#siteinfos {
width:45%;
margin-right:0; }

margin-right可能会导致换行，因为它是float：left;元素，我认为没有理由在其中留下一个边距，如果你仍然需要它，尝试在该div内部的元素中设置一个填充权限，这样它将始终保持正确的大小和对齐。

编辑：FIDDLE HERE

在调整浏览器窗口大小时，为什么这些div不会彼此相邻？

3 个答案: