0

我在构建自适应网站时遇到了一些问题。看看它应该是怎样的：

http://tweakers.net/ext/f/O1sEWJd53lwKA3Gv3W0CJDgW/full.png

我的css中有这段代码：

.HTML { 
    min-width: 100%; 
    height: 100%; 
} 

.page { 
    margin-top: 4.3%; /* 215px : 4960px */ 
    margin-left: 4.76%; /* 172px : 3615px */ 
    margin-right: 4.6%; /* 168px : 3615px */ 
    height: 100%; 
} 

.header { 
    width: 100%; 
    height: 13.95%; /* 661px : 4737px */ 
} 

.logo { 
    margin-left: 7.51%; /* 246px : pagewidth */ 
    width: 28%; /* 918px : pagewdith */ 
    height: auto; 
    float: left; 
} 

.searchbox { 
    margin-top: 24.4%; /* 161px : 661px */ 
    float:right; 
    width: 22.4%; /* 737px : pagewidth */ 
}

徽标按原样显示，但搜索框的 margin-top 似乎是 HTML 顶部的边距，而不是标题类顶部的边距。它变得太低了。我需要它是响应式的，因为图像的高度也是响应式的，所以搜索框应该适应徽标的高度，因为它们的底部是对齐的。

此外，我还有另一个类的高度应该是标题高度的 5%，但是当我给它高度时：5%; 它在 Chrome 23 中的高度为 0px ......这是怎么来的？

我的 HTML：

<body>
    <div class="page">
        <div class="header">
            <div class="logo">
                <img />
            </div>
            <div class="searchbox"></div>
        </div>
    </div>
</body>
4

1 回答 1

0

“尝试放置一个位置：相对于父级和位置：绝对到子级。” -数码相机

资料来源：http ://css-tricks.com/forums/discussion/9608/solved-margin-extends-beyond-parent/p1

这个解决方法是我解决这个问题的最接近的方法。

于 2013-02-11T08:49:01.647 回答