为什么我的网站内容在方形窗口（宽度和高度相同的屏幕）上彼此重叠？
[英]Why the contents of my website overlap each other on the square shaped window (screen with the equal width & height)?
问题描述
我是一名新的网页设计师。 这将是我第二个在线发布的网站。 问题是该网站非常适合所有屏幕尺寸的窗口（方形屏幕除外）。 举例来说， 此监视器将分解我的Web内容，并迫使它们彼此叠置或彼此叠置。 那看起来很糟糕。 我的假设是我的代码中有一个很小的错误导致发生这种情况，但是我无法弄清楚错误在哪里。 您可以在这里查看我的网站，尽管我会粘贴我的代码。 请帮我。 .html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>7Seas Redovisning</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<img src="img_akin/7seas1.jpeg" id="logo" alt="" width="12%" height="12%"/>
<h1><span class="header_name"><span class="seven">7</span>Seas Redovisning</span></h1>
<p>
<span class="mob_tele">Mob: 076-9516926 <br />
Tel: 040-133403</span><br />
info@7seasredovisning.se
</p>
</header>
<nav id="top_menu">
</nav>
<!--
<marquee behavior="alternate">We are coming soon, please check back later.</marquee>
-->
<div class="box_container">
<div class="box">Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
</div>
<div class="box">Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
</div>
<div class="box">Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
Box 1Box 1Box 1Box 1Box 1Box 1Box 1<br>
</div>
</div>
<div id="new_div"> <!--only the main content-->
<section id="main_section">
<!--
<marquee behavior="alternate">We are coming soon, please check back later.</marquee>
-->
<div class="image_service_list">
<div class="img_wrap">
<img src="img_akin/image_1st_body.jpg" width="650" height="312" alt=""/>
</div>
<div class="service_list">
<span class="style_number">1.</span> INKOMSTDEKLARATION<br /><br /><br />
<span class="style_number">2.</span> MOMSDEKLARATION<br /><br /><br />
<span class="style_number">3.</span> BOLAGSBILDNING<br /><br /><br />
<span class="style_number">4.</span> EKONOMI KONSLUT<br /><br /><br />
<span class="style_number">5.</span> LÖPANDE BÖKFÖRING
</div>
<div class="service_list">
<span class="style_number">6.</span> BOKSLUT & ÅRSREDOVISNING<br /><br /><br />
<span class="style_number">7.</span> SKATTEDEKLARATION<br /><br /><br />
<span class="style_number">8.</span> LÖNEADMINISTRATION<br /><br /><br />
<span class="style_number">9.</span> FAKTURERING<br /><br /><br />
<span class="style_number">10.</span> ONE MORE
</div>
</div>
</section>
</div>
<footer id="the_footer">
<p class="footer_text"><span id="footer_left">
© 7 seas Redovisning <br />
En del av 7seas Money Transfer KB<br />
F-skatt registrerat <br />
Org, Nr: 969756-4079 <br />
SEB Företagskonto: 5502-1030132<br />
BG: 102-5006
</span>
</p>
<p class="footer_text">
Besökadress: <a href="https://www.google.se/maps/place/Skomakarebyn+8,+218+41+Bunkeflostrand/@55.5592313,12.9325061,3a,75y,153.78h,90t/data=!3m4!1e1!3m2!1sufqG4dOye4Igl8W2ATJPgg!2e0!4m2!3m1!1s0x4653a718b0946da5:0xd60c6ee131582f21!6m1!1e1" title="See on Google Map">Skomakarebyn 8E<br />
218 41 Bunkeflostrand</a><br />
Malmö, Sweden <br />
Follow us on FB <!-- SMARTADDON BEGIN -->
<br />
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('www.7seasredovisning.se','bookmarks')"><img alt="Share" src="http://s1.smartaddon.com/s8.png" border="0" /></a>
<br />Designed & Developed by <a href="http://jabiralfatah.com/" title="Visit my Website">Jabir Al Fatah</a><br />
Copyright @ 2014 <a href="http://dhbangladesh.com/"title="Visit DH BANGLADESH">DH BANGLADESH in SWEDEN.</a>
</p>
<p class="footer_text"><span id="footer_right">
Tel: 040-133403<br />
Mob: 076-9516926<br />
e-Mail: info@7seasredovisning.se<br/>
<a href="http://7seasredovisning.se/">www.7seasredovisning.se</a><br/>
<span id="webstat">
<script src="http://stats.webstat.se/assets/stat_isp2.php"></script>
<script type="text/javascript">
<!--
document.write("<" + "script src=\"http://stats.webstat.se/statCounter.asp?id=38356&size=" + screen.width + "x" + screen.height + "&depth=" + screen.colorDepth + "&referer=" + escape(document.referrer) + "&isp=" + info2+ "\"></" + "script>");
-->
</script>
</span>
<!-- Slut WEBSTAT.SE kod -->
</span>
</p>
</footer>
</div>
</body>
</html>
.css：
*{
margin:0px;
padding:0px;
}
#top_header h1 {
font:bold 4em Fantasy;
text-align:center;
margin-top:-105px;
margin-right:250px;
color:#006400;
text-shadow:2px 2px 2px orange;
}
.header_name{
margin-left:80px;
}
.seven{
color:orange;
font-size:1.2em;
text-shadow:2px 2px 2px #006400;
}
#top_header p {
margin-top:-100px;
color:#00008B;
float:right;
font-family:Georgia;
margin-right:20px;
}
.mob_tele{
font-size:13.5px;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
display:-o-box;
display:-moz-box;
/*
display:-ms-box;
*/
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
-o-box-pack:center;
background-color:#E6E6FA;
}
#big_wrapper{
max-width:1200px;
margin-top:20px;
margin-bottom:15px;
display:-webkit-box;
display:-o-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
background-color:white;
-webkit-box-shadow: 0 0 2px 2px gray;
}
#top_header{
border:3px soild gray;
padding:20px;
}
#logo{
padding-top:20px;
padding-left:5px;
}
#top_menu{
border-top: 6px solid #20B2AA;
border-radius:0px;
box-shadow: 0 0 1.4px 1.4px #424242;
color:black;
}
#new_div{
display:block;
display:-moz-box;
display:-o-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
}
#main_section{
/*
border: 1px solid blue;
*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
.service_list{
display: inline-block;
float: left;
margin: 0 10px;
font-family:Euphemia;
font-weight:bold;
color:green;
}
.style_number{
font: italic 1.2em Georgia, Times, serif;
font-weight:bold;
color:#4169E1;
}
.box {
display:inline-block;
margin-top:50px;
margin-bottom:60px;
margin-left:55px;
padding:15px;
width:280px;
border: 3px solid gray;
border-radius:4px;
}
.box_container{
/*
width:1161px;
*/
white-space: nowrap;
}
.img_wrap{
float:right;
position:relative;
}
.img_wrap::before{
background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
background-image: -moz-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
background-image: -ms-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
background-image: -o-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
background-image: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 90%);
content:"\00a0";
top:0px;
left:0px;
height:100%;
width:100%;
position:absolute;
}
#the_footer{
background:#B0C4DE;
border-top:0.5px solid green;
}
.image_service_list{
margin-bottom:500px;
}
.footer_text{
list-style:none;
display:inline-block;
padding:40px;
margin-left:35px;
font-family:Euphemia;
font-size:13px;
}
#the_footer a{
text-decoration: none;
}
#the_footer a:hover{
text-decoration: underline;
}
1 个解决方案
解决方案1
0 已采纳 2014-11-05 10:03:20
我假设您提到的拟合错误是您的网站使用的最小宽度，这会导致在较小的屏幕或较小的浏览器窗口上进行水平滚动。 当您调整浏览器窗口的大小时，也会发生这种情况。 这是由.box上的css引起的，该css具有将三个框设置为280px的宽度和像素边距。 我有三种不同的解决方案。
第一种选择是通过使用百分比而不是像素来使框具有灵活的宽度。 例如，如果您给每一个提供30％的宽度，并在每一侧给中间5％的边距，则将得到三等分。
第二个建议是删除white-space: nowrap; 在.box_container以允许将框包装到换行符。 不过，这看起来不太好。
最后，您可以使用媒体查询来更改较小屏幕上的外观。 这里有两篇文章：
这种针对不同屏幕的设计被称为“响应式网页设计”，由于人们还会使用手机，平板电脑和其他具有不同屏幕尺寸的设备访问网站，因此这被认为是一种良好的做法。
有关响应式网页设计的文章：
免责声明：我最近没有阅读每一篇文章，但我知道这些网站大部分都是可靠的信息源。
window.screen.width和window.screen.height无法在iPad 3上运行
[英]window.screen.width and window.screen.height not working on iPad 3
为什么文档高度等于窗口内部高度+ pageYoffset？
[英]Why is the document height equal to window inner height + pageYoffset?
window.screen.width / height不应该与实际的屏幕宽度/高度相对应吗？
[英]Shouldn't window.screen.width/height correspond to actual screen width/height?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.