0
計算器流體佈局的問題,幫助學到很多很酷的東西,但不幸的是我堅持的東西,不知道如何研究我的出路吧....所以在這裏不用浮動問題,我希望有一個簡單的答案。與在Firefox
我已經制定了一個網站,該網站的偉大工程,就是我想要的,它採用了一種名爲LemmonSlider.js偉大的插件,我已經成功地使其全部呈液態佈局...差不多!
的問題是,它完美的Safari瀏覽器,iOS和Chrome,但在我測試的Firefox事情不好,很不好。我沒有在IE瀏覽器進行測試,但我能想象事情會是一樣時髦。
下面是一些簡單的代碼,給你的,我做了什麼的想法...
我在身體,HTML標籤使用最小高度已經嘗試過,但似乎並沒有幫助。
任何投入將非常感激
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example layout for the nice folk at stackoverflow</title>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<style type="text/css">
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
background-color:red;
}
#content {
position:absolute;
top:50%;
margin-top:-25%;
width:100%;
height:50%;
background-color:blue;
overflow:hidden;
}
#content ul {
position:relative;
margin:0;
padding:0;
height:100%;
background-color:yellow;
}
#content li {
list-style:none;
float:left;
height:inherit;
background-color:orange;
margin:0px 10px 0px 10px;
}
#content img {
height:inherit;
}
</style>
<script type="text/javascript">
$(window).bind('resize', function() {
location.reload();
});
</script>
</head>
<body>
<div id="content">
<ul>
<li>
<img src="any/sized/image" />
</li>
<li>
<img src="any/sized/image" />
</li>
<li>
<img src="any/sized/image" />
</li>
<li>
<img src="any/sized/image" />
</li>
<li>
<img src="any/sized/image" />
</li>
</ul>
</div>
</body>
</html>