CSS - 重新调整大小屏幕的问题

Question

我在这里遇到两个问题：

1）两个标题都应拉伸到整个屏幕。在屏幕重新调整大小期间，第二个标题横幅向右浮动太多。它应该在1200px宽度内停止

2）我也不能将菜单项放在相应的位置，如附图所示 - 它们总是落在下面。

非常感谢任何帮助！

Jsfiddle example

截屏： 我在这里贴了一个屏幕截图 http://oi57.tinypic.com/2v3rhn6.jpg

    body,p,input {font-family:verdana,helvetica,arial,sans-serif;}
img {border:0;}

body {
    font-size:14px;color:#555555;background-color:#f1f1f1;margin:0px;}
h1 {
    padding: 0px; 
    margin: 0px;
    color:#000000;
}

#container {
        margin:0px auto;
        border:0px solid #bbb;
        padding:4px;
        width:1200px;
}
.logo {
        margin:0px auto;
        border:0px; 
        padding:4px;
        width:1200px;
}

.white-box {
    width: 180px; 
    margin: 0px;
}

#main-header {
    height:50px;
    background-color: #dfe5f2;
    min-width: 1200px;
}
#ad-header {

    height:96px;
    background-color: #fff;
    min-width: 1200px;

}


#top-banner {

    float: right;
    margin: 0 auto;
    padding:3px;


}
.left-banner {
    width: 160px;
    margin: 0 auto;
    padding:3px;
}
#main-content {
    margin-top:10px;
    padding-bottom:10px;
}
#main-body {
    margin-left:10px;
    width:666px;
    height:150px;
}
#main-footer {
    margin-top:10px;
    margin-bottom:10px;
    padding:10px;
    font-family: Verdana, Arial, Helvetica, sans-serif; color: #000;
    font-size:11px;
    text-align: center;
}   
.box {
    padding: 8px;
    border: 1px solid silver;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
}
.box1 {
    font-size:12px;
    width: 180px;
    float: left;
}
.box1 h3 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
.box1 ul {margin:0;padding:0;list-style:none;}
.box1 li {margin-left:10px;padding:2px;list-style-type:none;}
.box1 li a {text-decoration:none;}
.box1 li a:hover {text-decoration:underline;}
.box1 li span, .leftmenucheckcount {font-size:.95em;}

.box2 {
    margin-left: 210px;
    padding: 15px;
}
#top-menu-black {
    height:12px;
    background-color: #000;
    min-width: 1200px;
}
#top-menu-white {
    height:1px;
    background-color: #fff;
    min-width: 950px;
}
#top-menu-orange {
    height:3px;
    background-color: #ff9401;
    min-width: 950px;
}
.top-menu-text {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #FFFFFF; 
    font-size:10px;
    font-weight: bold;
    padding:4px 4px 4px 230px;
    min-width: 900px;
}
.top-menu-text a{text-decoration: none; color: #FFFFFF;}
.top-menu-text a:link {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:visited {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:active {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:hover {text-decoration: none; color: #ff9401;}

a:link {color:#004eff; }
a:visited {color:#004eff; }
a:active {color:#004eff; }
a:hover {color:#ff9401;}

.article {background-color: #f6f6f6;}

img.imagerating {
    vertical-align:middle
}

.TextWrap {
    float: left;
    margin: 10px;
}
.amz-button {
    margin-left: 150px;
}
.amz-button2 {
    margin-left: 450px;
}
.bottom-amz {
    margin-left: 5px;
}

Answer 1

请在复制html + css之前创建文件html以进行检查： HTML：

<div id="main-header">
<div class="wrap-content">
<div class="logo"><h2>My Logo</h2></div>
<ul id="menu-top">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="ad-header" >
<div id="top-banner" class='wrap-content'><img src="http://4.bp.blogspot.com/-_wuIlLnLxsE/UioXtYApP7I/AAAAAAAABtY/-0bLO3etYa4/s1600/728x90_ELP_NewBanner_r2.gif" alt=""></div>
</div>
<div id="container">
<div id="main-content" class='wrap-content'>
<!-- left column -->
<div class="box box1">
<h3><span>Categories</span></h3>
<br>
<div class="left-banner"></div>
<div style="clear:both;"></div>
</div>
<!-- left column -->
<div class="box box2">
<p><h1>Page Title</h1>
<br>
</p>
<p>Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
Text text text text text<br><br>
</p>
</div>
<div style="clear:both;"></div>
</div>
<!-- footer --> 
<div id="main-footer">Footer</div>
<!-- footer --> 
</div>

CSS：

body,p,input {font-family:verdana,helvetica,arial,sans-serif;}
img {border:0;}

body {
font-size:14px;color:#555555;background-color:#f1f1f1;margin:0px;}
h1 {
padding: 0px; 
margin: 0px;
color:#000000;
}

#container {
margin:0px auto;
border:0px solid #bbb;
padding:4px;
/*  width:1200px;*/
}
.logo {
margin:0px auto;
border:0px; 
padding:4px;
float: left;
}

.white-box {
width: 180px; 
margin: 0px;
}

#main-header {
height:50px;
background-color: #dfe5f2;
}
#ad-header {

height:96px;
background-color: #fff;

}


#top-banner {

margin: 0 auto;
padding:3px;


}
#top-banner img{
float: right;
}
.left-banner {
width: 160px;
margin: 0 auto;
padding:3px;
}
#main-content {
margin-top:10px;
padding-bottom:10px;
}
#main-body {
margin-left:10px;
width:666px;
height:150px;
}
#main-footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
font-family: Verdana, Arial, Helvetica, sans-serif; color: #000;
font-size:11px;
text-align: center;
}   
.box {
padding: 8px;
border: 1px solid silver;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
}
.box1 {
font-size:12px;
width: 180px;
float: left;
}
.box1 h3 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
.box1 ul {margin:0;padding:0;list-style:none;}
.box1 li {margin-left:10px;padding:2px;list-style-type:none;}
.box1 li a {text-decoration:none;}
.box1 li a:hover {text-decoration:underline;}
.box1 li span, .leftmenucheckcount {font-size:.95em;}

.box2 {
margin-left: 210px;
padding: 15px;
}
#top-menu-black {
height:12px;
background-color: #000;
min-width: 1200px;
}
#top-menu-white {
height:1px;
background-color: #fff;
min-width: 950px;
}
#top-menu-orange {
height:3px;
background-color: #ff9401;
min-width: 950px;
}
.top-menu-text {
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #FFFFFF; 
font-size:10px;
font-weight: bold;
padding:4px 4px 4px 230px;
min-width: 900px;
}
.top-menu-text a{text-decoration: none; color: #FFFFFF;}
.top-menu-text a:link {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:visited {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:active {text-decoration: none; color: #FFFFFF;}
.top-menu-text a:hover {text-decoration: none; color: #ff9401;}

a:link {color:#004eff; }
a:visited {color:#004eff; }
a:active {color:#004eff; }
a:hover {color:#ff9401;}

.article {background-color: #f6f6f6;}

img.imagerating {
vertical-align:middle
}

.TextWrap {
float: left;
margin: 10px;
}
.amz-button {
margin-left: 150px;
}
.amz-button2 {
margin-left: 450px;
}
.bottom-amz {
margin-left: 5px;
}
.wrap-content{
width: 1200px;
margin: auto;
}
#menu-top {
float: right;
list-style: outside none none;
margin: 0;
padding: 0;
}
#menu-top > li {
float: left;
margin: 16px;
}

@media only screen and (max-width: 1199px){
.wrap-content{
width: 100%;
}
}

Answer 2

这是我使用flexbox的布局解决方案。我创建了一个.inner div，您可以使用它来指定布局的最小和最大宽度。

＆＃13;

＆＃13;

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html, body {
  background: #F1F1F1;
  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  border: none;
  width: 100%;
  height: 100%;
}

header, main {
  padding: 0px 40px;
}

.inner {
  margin: 0px auto;
  width: 100%;
  min-width: 400px;
  max-width: 1200px;
}

.main-header {
  background: #DFE5F3;
}

.main-header .inner {
  display: flex;
  justify-content: space-between;
}

.main-header nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.main-header nav a {
  margin-left: 20px;
  text-decoration: none;
}

.ad-header {
  background: #FFF;
  text-align: right;
}

.ad-header img {
  max-width: 100%;
}

main .inner {
  display: flex;
  padding: 20px 0px;
}

.box {
  padding: 20px;
  background: #FFF;
  border-radius: 4px;
  border: 1px rgba(0, 0, 0, 0.2) solid;
}

.box1 {
  flex-shrink: 0;
  margin-right: 20px;
  width: 180px;
}

.box2 {
  width: 100%;
}

＆＃13;

<header class="main-header">
  <div class="inner">
    <h1>My Logo</h1>
    <nav>
      <a href="#">Menu 1</a>
      <a href="#">Menu 2</a>
      <a href="#">Menu 3</a>
    </nav>
  </div>
</header>

<header class="ad-header">
  <div class="inner">
    <img src="http://lorempixel.com/655/80/abstract/" />
  </div>
</header>

<main>
  <div class="inner">
    <div class="box box1">
      <h2>Categories</h2>
    </div>

    <div class="box box2">
      <h2>Page Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec pretium ipsum. Nullam scelerisque sem eros, in varius est laoreet a. Curabitur sodales urna ac mollis rutrum. In non pretium arcu, ac dictum erat. Praesent interdum erat mauris, nec condimentum nisi dignissim at. Nam ullamcorper risus sed consequat blandit. Cras tempus sem mauris, eget lacinia risus suscipit quis. Quisque vehicula eu metus sit amet sagittis. Nam ornare nibh eu nulla bibendum consequat eleifend sed arcu.</p>
    </div>
  </div>
</main>

＆＃13;

＆＃13;

＆＃13;