为什么我的网站的内容在方形窗口上重叠(屏幕宽度和高度相等）
Why the contents of my website overlap each other on the square shaped window (screen with the equal width & height)?
我是一名新的网页设计师。这将是我在网上发布的第二个网站。问题是，除了方形屏幕外，该网站很适合所有屏幕大小的窗口。举个例子，这个监视器会分解我的网络内容，迫使它们要么叠在一起，要么叠在下面。这看起来很可怕。我的假设是，我的代码中有一个非常小的错误导致了这种情况的发生，但我不知道错误在哪里。你可以在这里看看我的网站，尽管我会粘贴我的代码。请帮帮我。.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;
}
我假设您提到的拟合错误是您的网站使用的最小宽度，这会导致在较小的屏幕或较小的浏览器窗口上进行水平滚动。调整浏览器窗口大小时也会发生这种情况。这是由.box上的css引起的，该css具有设置为280px宽度和像素边距的三个框。我有三个不同的建议来解决这个问题。
第一种选择是通过使用百分比而不是像素来使方框具有灵活的宽度。例如，如果你给每边30%的宽度和中间5%的边距，你会得到一个很好的三等分。
第二个建议是删除.box_container上的white-space: nowrap;，以允许框换行。不过这看起来不太好看。
最后，您可以使用媒体查询来更改较小屏幕上的外观。这里有两篇文章：
- 如何使用CSS3媒体查询创建您网站的移动版本-Smashing Magazine
- CSS媒体查询-Mozilla开发者网络
这种针对不同屏幕的设计被称为响应式网络设计，这被认为是一种很好的做法，因为人们访问网站时也会使用不同屏幕尺寸的手机、平板电脑和其他设备。
关于响应式网页设计的文章：
- 响应式Web设计-列表之外
- 响应式网页设计入门指南-树屋博客
免责声明：我最近没有读过这些文章，但我知道这些网站大多是可靠的信息来源
相关文章：
- 根据页面/屏幕高度调整大小
- 触发方向更改事件时获得错误的屏幕高度
- 如何使图像无论屏幕高度/宽度如何都停留在屏幕底部
- 如何检查屏幕高度以进一步$http请求
- 根据屏幕高度动态填充框
- IOS8-计算键盘打开或关闭时的可见屏幕高度
- 如何使Youtube嵌入适合屏幕高度，同时让其宽度溢出
- 在Javascript中查找屏幕宽度和屏幕高度
- 标题在滚动100%屏幕高度调整大小
- 如何在javascript中获得浏览器的正确android可用屏幕高度
- Lightbox image max-height =用户屏幕高度
- 如何在第一个页面加载时设置最小高度/宽度为屏幕高度/宽度
- 在css中使用Java脚本获取屏幕高度和宽度
- 如何在java脚本中获得最大可用屏幕高度
- 弹出背景不需要屏幕高度的全部高度
- 调整边缘-顶部/底部与屏幕高度成比例
- 根据屏幕高度调整图像大小，但保持比例
- 如何在javascript中按%(百分比）设置屏幕高度和宽度
- jquery .scrollTop(） 屏幕高度
- 如何在javascript中获得准确的屏幕高度和宽度
