我从头开始创建了一个响应式模板。
我的模板的当前状态在这里（在我的问题的下方）：http://jsfiddle.net/w0p9jhbf/
我的问题出在@media screen and (min-width:67em) {...}，我试图采取严肃的浮动行动。
我验证了我的HTML代码，检查了任何遗忘的R＆amp; L边距，将元素的宽度减少到非常低的值，但我无法解决我的情况。
我也使用了chrome和ie的检查元素屏幕，但那些也没有帮助我。 CSS验证提供了1个与我的案例无关的错误。 （关于url(data:image/gif;base64 ...）的使用错误
我希望的观点是：
重要提示：如您所见，我使用下面的代码部分来border-box。此代码适用于所有响应状态。
article,aside,div,form,header,input[type=submit],input[type=text],li,main,nav,section,textarea,ul,footer {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
SayfaBaşlık
＆LT; /脚本＆GT;
<header id="header" role="banner">
<nav id="nav" role="navigation">
<ul class="nw clearfix">
<li class="current"><a style="border: 0px;" rel="home" href="#" title=""><img src="http://www.okobe.co.uk/images/scr/P/89/3/1000020389/M01.jpg" alt="logo" /></a></li>
<li class="di"><a class="dia" rel="bookmark" href="/arşiv" title="">Arşiv</a></li>
<li class="di"><a class="dia" rel="bookmark" href="/etiketler" title="">Etiketler</a></li>
<li class="di" id="hi"><a class="pen" rel="bookmark" href="/yazıya-davet" title="">Sen de!</a></li>
<li class="di"><a class="dia" rel="bookmark" href="/yorumlar" title="">Yorumlar</a></li>
<li class="di" id="il"><a class="dia" rel="bookmark" href="/iletişim" title="">İletişim</a></li>
<li class="di" id="hk"><a class="dia" rel="bookmark" href="/hakkında" title="">Hakkında</a></li>
<li class="di" id="ht"><a class="dia" rel="bookmark" href="/harita" title="">Harita</a></li>
</ul>
</nav>
<form id="araf1" class="clearfix" role="search" method="post" action="#">
<label id="araf1_label" for="araf1_inp">Google ile ara</label>
<input id="araf1_inp" type="text" name="aranan" placeholder="Örneğin: Rosa Parks" />
<input id="araf1_btn" name="aradugme" type="submit" value="Ara">
</form>
</header>
<main id="main" role="main" class="clearfix">
<div id="ana">
<ul id="#dkr">
<li class="dd d1">
<article>
<h1 class="artit">Yazı 1 Başlık</h1>
<ul class="aul">
<li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
<li class="trh">26.12.2015</li>
<li class="yrm">0 Yorum</li>
</ul>
<p class="tntm">tanıtım cümleleri</p>
<figure></figure>
<p class="intro">yazıdan introAnahtarları başkalarında olan ve hep öyle kalacak olan kapıların bir bir kapanmakta olduğunu, muradına erme şansının artık tükendiğini idrak eden keloğlanın dramına benziyor bu. Erilemeyen murat, tarihe Muhteşem Falanca diye geçme hayali belli ki.Ama antropolojiden yardım almaksızın sosyolojiye giriş yapmak da zor sanki. İnsanın evrimleşme hızı teknolojinin epeyce gerisinde kalıyor. Uzaktakine sesimizi duyurmak için mikrofonu ağzımıza yaklaştırmak yeterliyken bile, hâlâ dağdan dağa seslenircesine bar bar bağırıyoruz. İstila edercesine çoğalıp yayılan teknolojik imkânlar hayatımızı hangi yönden kolaylaştırdı bilemiyorum ama gittikçe artan bir bağırtı ve kakofoni denizinde boğulduğumuz kesin. Gene de şunca lâfazanlık ve slogan denizini yarıp ortasından geçen bir yol bulmaya, sözü evirip çevirmeden en temel soruyu sorarak meselenin adını koymaya çalışalım:</p>
<ul class="ktg clearfix">
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
</ul>
<a class="to" href="#" rel="bookmark">Tümünü Oku</a>
</article>
</li>
<li class="dd d2">
<article>
<h1 class="artit">Yazı 1 Başlık</h1>
<ul class="aul">
<li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
<li class="trh">26.12.2015</li>
<li class="yrm">0 Yorum</li>
</ul>
<p class="tntm">tanıtım cümleleri</p>
<figure></figure>
<p class="intro">yazıdan intro</p>
<ul class="ktg clearfix">
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
</ul>
<a class="to" href="#" rel="bookmark">Tümünü Oku</a>
</article>
</li>
<li class="dd d3">
<article>
<h1 class="artit">Yazı 1 Başlık</h1>
<ul class="aul">
<li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
<li class="trh">26.12.2015</li>
<li class="yrm">0 Yorum</li>
</ul>
<p class="tntm">tanıtım cümleleri</p>
<figure></figure>
<p class="intro">yazıdan intro</p>
<ul class="ktg clearfix">
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
</ul>
<a class="to" href="#" rel="bookmark">Tümünü Oku</a>
</article>
</li>
<li class="dd d4">
<article>
<h1 class="artit">Yazı 1 Başlık</h1>
<ul class="aul">
<li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
<li class="trh">26.12.2015</li>
<li class="yrm">0 Yorum</li>
</ul>
<p class="tntm">tanıtım cümleleri</p>
<figure></figure>
<p class="intro">yazıdan intro</p>
<ul class="ktg clearfix">
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
</ul>
<a class="to" href="#" rel="bookmark">Tümünü Oku</a>
</article>
</li>
<li class="dd d5">
<article>
<h1 class="artit">Yazı 1 Başlık</h1>
<ul class="aul">
<li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
<li class="trh">26.12.2015</li>
<li class="yrm">0 Yorum</li>
</ul>
<p class="tntm">tanıtım cümleleri</p>
<figure></figure>
<p class="intro">yazıdan intro</p>
<ul class="ktg clearfix">
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
</ul>
<a class="to" href="#" rel="bookmark">Tümünü Oku</a>
</article>
</li>
<li class="dd d6">
<article>
<h1 class="artit">Yazı 1 Başlık</h1>
<ul class="aul">
<li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
<li class="trh">26.12.2015</li>
<li class="yrm">0 Yorum</li>
</ul>
<p class="tntm">tanıtım cümleleri</p>
<figure></figure>
<p class="intro">yazıdan intro</p>
<ul class="ktg clearfix">
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
</ul>
<a class="to" href="#" rel="bookmark">Tümünü Oku</a>
</article>
</li>
<li class="dd d1">
<article>
<h1 class="artit">Yazı 1 Başlık</h1>
<ul class="aul">
<li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
<li class="trh">26.12.2015</li>
<li class="yrm">0 Yorum</li>
</ul>
<p class="tntm">tanıtım cümleleri</p>
<figure></figure>
<p class="intro">yazıdan intro</p>
<ul class="ktg clearfix">
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
</ul>
<a class="to" href="#" rel="bookmark">Tümünü Oku</a>
</article>
</li>
<li class="dd d2">
<article>
<h1 class="artit">Yazı 1 Başlık</h1>
<ul class="aul">
<li class="yzn"><a href="#" rel="author">Yazar Ad Soyad</a></li>
<li class="trh">26.12.2015</li>
<li class="yrm">0 Yorum</li>
</ul>
<p class="tntm">tanıtım cümleleri</p>
<figure></figure>
<p class="intro">yazıdan intro</p>
<ul class="ktg clearfix">
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">kategori</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
<li><a href="" rel="bookmark">etiket</a></li>
</ul>
<a class="to" href="#" rel="bookmark">Tümünü Oku</a>
</article>
</li>
</ul>
</div>
</main>
<aside id="aside">
<h1>ASIDE ASIDE ASIDE</h1>
<p>
ghfdhsjf hdfjdgf djfhsdjfh dhsfd hjdfgd jsfsdj djfj df s sdf jdfdjsdf d hdfsdfgsdj jdfgdjhgd hjgfj gj hdgfjgf jhgsdfjgj jgdhjgf jhfj sdhgfj df fd sd sdfhsf jhdfgjdhjsfdg djgdjf djg jjg djghj sf jhsdfgsdjf jhgdflgu g fdhsgdhf jsf dfgjsdghf jdgsfdf jfjsdgfjgdfh fjsdgfjddygsfj dsjg jdgf djfhsdjfh dhsfd hjdfgd jsfsdj djfj df s sdf jdfdjsdf d hdfsdfgsdj jdfgdjhgd hjgfj gj hdgfjgf jhgsdfjgj jgdhjgf jhfj sdhgfj df fd sd sdfhsf jhdfgjdhjsfdg djgdjf djg jjg djghj sf jhsdfgsdjf jhgdflgu g fdhsgdhf jsf dfgjsdghf jdgsfdf jfjsdgfjgdfh fjsdgfjddygsfj dsjg jfhsdjfh dhsfd hjdfgd jsfsdj djfj df s sdf jdfdjsdf d hdfsdfgsdj jdfgdjhgd hjgfj gj
</p>
</aside>
<footer id="footer" role="contentinfo">
<small>Copyright © <time datetime="2015">2015</time></small>
</footer>
</body>
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display: block;
}
audio,canvas,progress,video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],template {
display: none;
}
a {
background-color: transparent;
}
a:active,a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,strong {
font-weight: 700;
}
dfn {
font-style: italic;
}
mark {
color: #000;
}
sub,sup {
line-height: 0;
position: relative;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
svg:not(:root) {
overflow: hidden;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,kbd,pre,samp {
font-family: monospace,monospace;
}
button,input,optgroup,select,textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,select {
text-transform: none;
}
button,html input[type=button],input[type=reset],input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type=checkbox],input[type=radio] {
box-sizing: border-box;
padding: 0;
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
height: auto;
}
input[type=search] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: 700;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a:link {
color: #41b7d8;
}
a:visited {
color: #41b7d8;
}
a:focus,a:hover {
color: #e53a2b;
}
a:active {
color: #fff;
background-color: #e53a2b;
}
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: 0 0;
}
small {
font-size: 80%;
}
article,aside,div,form,header,input[type=submit],input[type=text],li,main,nav,section,textarea,ul,footer {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
border: 0;
display:inline-block;
}
.clearfix:after,.clearfix:before {
content: "";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
body {
background-image: url(data:image/gif;base64,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);
}
label {
display: block;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
/* CUSTOM */
/* font-size:0 resim ile link yüksekliğini aynı yapıyor */
/* display:table-cell olmazsa dikine ortalama yapmıyor*/
.current {
font-size: 0;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#hk,#il,#ht {
display: none;
}
.di {
float: left;
line-height: 1em;
border: 1px solid rgba(0,0,0,.05);
border-left: 0;
width: 25%;
text-align: center;
}
.dia {
padding-top: 1.625em;
padding-bottom: 1.625em;
display: block;
}
.pen {
padding-top: 2.5em;
padding-bottom: .75em;
display: block;
}
#hi .pen {
background-image: url(../resimler/ikon/selamlayan-kalem.png);
background-repeat: no-repeat;
background-position: top right;
}
.nw a:link,.nw a:visited {
color: rgba(0,0,0,.3);
}
.current:hover,.nw a:focus,.nw a:hover {
color: rgba(0,0,0,.6);
background-color: #ff6;
}
.nw a:active {
color: #fff;
background-color: #e53a2b;
}
#araf1_btn,#araf1_inp {
border: .08em solid rgba(0,0,0,.1);
font-size: .875em;
line-height: 1.125em;
height: 2.5em;
float: left;
padding: 0 .25em;
margin: 0;
}
#araf1_inp {
width: 85%;
border-top-left-radius: .625em;
border-bottom-left-radius: .625em;
}
#araf1_btn {
width: 15%;
background-color: #e53a2b;
color: #fff;
border-left: 0;
border-top-right-radius: .625em;
border-bottom-right-radius: .625em;
}
#araf1_label {
display: none;
}
#araf1, #aside, #main {
background-color: #fff;
}
.artit {
font-size: 2em;
font-family: Georgia,'Times New Roman',Times,serif;
}
.tntm,.yzn {
font-size: 1.25em;
font-family: Georgia,'Times New Roman',Times,serif;
}
.yzn {
display: block;
border-bottom: .08em solid #e5e5e5;
}
.ktg li {
float: left;
}
/* layout */
#aside,#main,#header,.dd article { overflow:hidden; }
#araf1 {
padding-top: 1em;
}
.dd article,#araf1 {
padding-left: 2%;
padding-right: 2%;
}
.dd article {
border-bottom: .25em solid #41b7d8;
padding-top: 2em;
padding-bottom: 2em;
}
#aside,#footer {
padding: 2em 2%;
}
/* viewport */
@media screen and (min-width:26em) {
#il {display:block;}
.di {width:20%;}
}
@media screen and (min-width:29em) {
#hk {display:block;}
.di {width:16.66667%;}
}
@media screen and (min-width:31em) {
#ht {display:block;}
.di {width:14.28571%;}
}
@media screen and (min-width:37em) {
#araf1 {
position: relative;
left: 54%;
bottom: 8em;
width: 45%;
background-color: transparent;
padding: 0;
}
#main {
margin-top: -2.1875em; /* height of search form */
}
}
@media screen and (min-width:48em) {
.dd {
padding-left:10%;
border-left-width: .625em;
border-left-style: solid;
}
.d1 { border-left-color: #c9e9e5; }
.d2 { border-left-color: #cdeeaa; }
.d3 { border-left-color: #f9f0a8; }
.d4 { border-left-color: #e0cfdf; }
.d5 { border-left-color: #faced2; }
.d6 { border-left-color: #bcd8f0; }
.dd article {
padding-left: 0%;
padding-right: 8%;
}
}
@media screen and (min-width:67em) {
.dd {
padding-left:0;
border-left-width: 0;
}
.dd article {
padding-left: 2em;
padding-right: 1.5em;
}
.current,.di {
display: block;
float: none;
width:12em;
line-height:1em;
border:0;
}
.current {
font-size:1em;
border-bottom:.0625em solid rgba(0,0,0,.05);
padding-top:1em;
padding-bottom:1em;
background-color:#fff;
border-top-left-radius:.625em;
}
.di {
border-bottom:.0625em solid rgba(0,0,0,.05);
border-right:.0625em solid rgba(0,0,0,.05);
text-align:left;
}
.dia {
padding: 1.5em 0 1.5em 4em;
}
.pen {
padding: 1.5em 1em 1.5em 2em;
}
#nav {
width: 12em;
}
#araf1 {
left:0;
bottom:0;
margin-top:3em;
}
#main {
margin-top:0;
padding-bottom:2em;
}
#main,#nav {
float: left;
margin-top: .625em;
}
#main {
width: 58%;
padding-top: 2.8125em;
border-radius: 0 .625em .625em;
}
#araf1,#aside {
float: right;
width: 42%;
margin-left: -12em;
padding-left: 13em;
background-color: transparent;
padding-right: .5%;
}
#araf1_label {
display: block;
}
#footer {
clear: both;
}
}
@media screen and (min-width:70em) {
.dd {
padding-left:5%;
border-left-width: .625em;
border-left-style: solid;
}
.dd article {
padding-left: 0;
padding-top:0;
padding-right:5%;
}
#ana {
padding-top:2.4375em;
}
}
@media screen and (min-width:80em) {
.dd {
padding-left:8%;
}
.dd article {
padding-right:8%;
}
}
@media screen and (min-width:90em) {
.dd {
padding-left:10%;
}
.dd article {
padding-right:10%;
}
}
@media screen and (min-width:100em) {
#araf1,#aside {
padding-left: 15em;
padding-right: 1.5%;
}
}
答案 0 :(得分：0)
#header案例中删除#aside,#main,#header,.dd article { overflow:hidden; }后，已经解决。
我无法理解为什么这个动作解决了我的问题。
可能的原因是：
#nav中的浮动块级元素#araf1和#header}已经.clearfix
#nav向左移动，#araf1向右移动，因此可能无法隐藏溢出。正如我所说，我解决了什么＆＃39;但无法获得“为什么”＃。 最好的问候
<header id="header" role="banner">
<nav id="nav" role="navigation">
<ul class="nw clearfix">
<li class="current"><a style="border: 0px;" rel="home" href="#" title=""><img src="http://www.okobe.co.uk/images/scr/P/89/3/1000020389/M01.jpg" alt="logo" /></a></li>
<li class="di"><a class="dia" rel="bookmark" href="/arşiv" title="">Arşiv</a></li>
<li class="di"><a class="dia" rel="bookmark" href="/etiketler" title="">Etiketler</a></li>
<li class="di" id="hi"><a class="pen" rel="bookmark" href="/yazıya-davet" title="">Sen de!</a></li>
<li class="di"><a class="dia" rel="bookmark" href="/yorumlar" title="">Yorumlar</a></li>
<li class="di" id="il"><a class="dia" rel="bookmark" href="/iletişim" title="">İletişim</a></li>
<li class="di" id="hk"><a class="dia" rel="bookmark" href="/hakkında" title="">Hakkında</a></li>
<li class="di" id="ht"><a class="dia" rel="bookmark" href="/harita" title="">Harita</a></li>
</ul>
</nav>
<form id="araf1" class="clearfix" role="search" method="post" action="#">
<label id="araf1_label" for="araf1_inp">Google ile ara</label>
<input id="araf1_inp" type="text" name="aranan" placeholder="Örneğin: Rosa Parks" />
<input id="araf1_btn" name="aradugme" type="submit" value="Ara">
</form>
</header>