Question

我一直使用表格，发现它们很容易。我试图使用CSS代替它，这是一场噩梦。事情一切都在发生。这不是表格所发生的事情。

我知道将设计与内容分离但是，男人，CSS到处都是。我一直在努力让这个简单的模板正常工作。页眉，页脚和三列，以及带子区域的导航栏。任何人都可以帮我解决这个问题，以便事情不仅仅是全部移动。目前，当我调整窗口大小时，即使外部div不会变小，标题也会 - 但它似乎正在向右移动我的右列。

我想要的只是在窗口调整大小时保持不变的所有东西的宽度（无论是通过拖动还是通过缩小/缩小）。有没有直接的方法来做到这一点（如果有的话，我找不到它）。我想只是给每个列div一个宽度，而父级潜水宽度但我必须遗漏一些东西。

另外，我似乎无法让导航栏高一点。如果它变小，列就会变高。列总是只是保持在它顶部的div之下（就像一个页脚应该总是低于它们）？这是表格的作用吗？我觉得回到桌子是我最好的选择，但我真的想让div工作。

CSS文件

    @import url(http://fonts.googleapis.com/css?family=Open+Sans);

body { 
  font-family: 'Open Sans', sans-serif;
  color: #666;
}

/* STRUCTURE */

#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
}
header {
    height: 100px;
    padding: 0 15px;
}

navigation {
    height: 62px;
    padding: 0 0 0 0;
        width: 100%;
    float: left;
}

#content {
    width: 125px;
    float: left;
    padding: 5px 15px;
}

#middle {
    width: 470px; /* Account for margins + border values */
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
}

#sidebar {
    width: 210px;
    padding: 5px 15px;
    display:inline-block;
        vertical-align:top;
}
footer {
    clear: both;
    padding: 0 15px;
}

/* NAVIGATION */

#nav {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align:center;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc;
}
#nav ul{
    padding:0
}
#nav ul li{
    display:inline-block;
    margin-right:-2px;
    position:relative;
}
#nav ul li a{
    display:inline-block;
    padding:4px 15px;
    background:#f2f2f2;
    color:#000;
    text-decoration: none;
    color: #069;
    font-weight: bold;
    border-right: 1px solid #ccc; 
}
#nav ul li a:hover{background: #6166;} /*hovercolor main menu*/
#nav ul ul{
    position:absolute;
    left:0;
    width:200px;
    transition:all .5s; 
    max-height: 0;
    overflow: hidden;
}
#nav  ul.submenu li{
    display:block; 
}
#nav  ul.submenu li a{
    display:block;
    background:#f2f2f2;
    color: #069;
}
#nav  ul.submenu li a:hover{background: #6166;} /*hovercolor main menu*/
#nav ul li:hover ul{
    max-height: 10000px;
}   

       /************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {

#pagewrap {
    width: 94%;
}
#content {
    width: 41%;
    padding: 1% 4%;
}
#middle {
    width: 41%;
    padding: 1% 4%;
    margin: 0px 0px 5px 5px;
    float: right;
}

#sidebar {
    clear: both;
    padding: 1% 4%;
    width: auto;
    float: none;
}

header, footer {
    padding: 1% 4%;
}
}

/* for 700px or less */
@media screen and (max-width: 600px) {

#content {
    width: auto;
    float: none;
}

#middle {
    width: auto;
    float: none;
    margin-left: 0px;
}

#sidebar {
    width: auto;
    float: none;
}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

header {
    height: auto;
}
h1 {
    font-size: 2em;
}
#sidebar {
    display: none;
}

#content {
background: #f8f8f8;
}
#sidebar {
background: #f0efef;
}
header, #content, #middle, #sidebar {
margin-bottom: 5px;
}

#pagewrap, header, #content, #middle, #sidebar, footer {
border: solid 1px #ccc;
}

HTML

<!DOCTYPE html>
<html>
  <head>

        <link rel="stylesheet" type="text/css" href="style.css">

  </head>
  <body>


<div id="pagewrap">

<header>
    <h1>xxx</h1>
</header>

<navigation>
        <div id="nav">
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sub Menu</a>
            <ul class="submenu">
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>

            </ul>
        </li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
    </ul>
    </div>
</navigation>

<section id="content">
    <h2>1st Content Area</h2>
    <p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p>
</section>

<section id="middle">
    <h2>2nd Content Area</h2>
    xxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxxxxx xxx x x xxxx x x xxxxx
</section>

<aside id="sidebar">
    <h2>3rd Content Area</h2>
    <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</aside>

<footer>
    <h4>Footer</h4>
        <p>Footer text</p>
    </footer>

    </div>




    </body>
</html>

Answer 1

漂浮是邪恶的。停止使用它。

更严重的是，float会从流中移除元素，这使得之后难以控制。请改用display：inline-block。如果需要，修复元素的宽度或最大宽度。更容易。

Answer 2

JSFiddle of Solution：https://jsfiddle.net/ocqyqkbd/1/

我想您的意思是，无论浏览器的大小如何，您都希望页面具有固定的宽度？然后摆脱媒体查询......删除内部的一切：

@media screen and (max-width: 980px) { ... }

删除内部的所有内容：

@media screen and (max-width: 600px) { ... }

删除内部的所有内容：

@media screen and (max-width: 480px) { ... }

要降低导航的高度，您需要在css中添加以下内容以调整UL页边距：

#nav > ul { margin: 5px 0 }

CSS是否比页面布局更好？

2 个答案: