Question

我正在尝试使用div创建简单的网页。我已经阅读了很多文章，但每个div的宽度和高度都在px中指定。也许我不明白什么，但也许最好在percantage中指定这个属性？我试过了，但没有收到预期的结果我需要得到这样的结果 Desired

这是我的HTML

<!DOCTYPE HTML>
<html>
<head>
  <title>Test page</title>
    <link rel="stylesheet" href="style/stylesheet.css" />
</head>
    <body>
    <div id="container">
<!-- HEADER -->
        <div id="header">
        <div id="logo">Logo</div>
        <div id="top_info">Top Info</div>
        <div id="navbar">
            <ul>
                <li><a href="404.html">First</a></li>
                <li><a href="404.html">Second</a></li>
                <li><a href="404.html">Third</a></li>
                <li><a href="404.html">Fourth</a></li>
                <li><a href="404.html">Fifth</a></li>
                <li><a href="404.html">Sixth</a></li>
            </ul>
            </div>
</div>
    <div id="content_data">
        <div id="banner">Banner</div>
        <div id="left_col">Left column</div>
        <div id="content">Contnent area</div>
        <div id="right_col">Right column</div>
    </div>
     <div id="footer">
        Footer
        </div>   

    </div>
    </body>
</html>

这是css文件

#container {
 width: 90%;   
    margin: 0 auto;
    background: #fff;
}
#header {
 width: 100%;   
    height: 60px;
    border-bottom: 1px solid #c7c7c7;
    background: #333;
}
#logo {
 float:left;
    width: 40px;
    height: 40px;
    margin: 10px;
    background: #ccc;
}
#top_info {
 float: right;
    width: 100px;
    height: 40px;
    background: #666;
    border: 1px solid #c7c7c7;
    margin: 10px;
}
#navbar {
 height: 20px;
    clear: both;
}
#navbar ul {
 margin: 0;
    padding: 0;
    list-style: none;
}
#navbar ul li {
 clear: both;
}
#footer {
 padding: 20px;
    clear: both;
}
#navbar ul li a {
 font-size:12px; float: left;
    padding: 0 0 0 20px;
    display: block;
}
#banner {
 background: #666; 
    height: 120px;
    clear: both;
}
#content {
    width : 60%; 
}
#left_col {
 float: left;
    width: 20%;
    height: 200px;
    border: 1px solid #333;
    color: #FFF;
    background: #000;
}
#right_col {
    background: #000;
 float: right;
        width: 20%;
    height: 200px;
    border: 1px solid #333;
    color: #FFF;

}

但是得到下一个结果。如果设置容器id的宽度（以像素为单位），则效果很好 enter image description here 如果可能，请帮助解决问题并提出一些建议，如何建立负责任的网页，也许是一些文章或书籍 THX。

更新

我已将宽度更改为50％并且可以正常工作。我想这是因为parrent div的宽度为90％，所以20％（左）+ 20％（右）+ 50％（内容）= 90％。我对吗？

Answer 1

问题是左右列已设置边框1px。它使它们的宽度为20％+ 2像素（左右1px边框）。内容区域也应该浮动。

编辑：如果您需要这些边框，请按如下方式设置列宽：

width: calc(20% - 2px);

Answer 2

使用百分比是创建响应式网页的一种方法，但更好的方法是使用媒体查询。

看看CSS3 media queries。

它们正是您所需要的。您需要做的就是为每个媒体查询指定一些最大或最小屏幕尺寸。这样，您就可以设计您的网站在移动设备，平板电脑，计算机等上的外观，并且它们不一定都是相同的！

在计算机大屏幕上看起来不错的东西在移动设备上看起来不一定好看但是使用媒体查询，你可以为这两种设备设计单独的版本！

例如，您仅使用min-width

为桌面计算机执行一些CSS

@media screen and (min-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of more than 800px*/
    body {
        background-color: lightblue;
    }
}

@media screen and (max-width: 800px) { /*The following CSS runs only for displays with a width (in pixels) of less than 800px*/
    body {
        background-color: yellow;
    }
}

这样，您的网页在台式机上看起来与众不同，在移动设备和平板电脑上看起来有所不同。

另请参阅this精彩链接。

Answer 3

是的，你是对的。您的百分比应该加起来为100％

20％（左）+ 20％（右）+ 50％（含量）= 90％（不是100％）

你可以使左右百分比各占25％，得到100％。这应该可以正常工作。

Answer 4

该百分比与其直接父母有关。因此，如果将父级设置为90％并不重要。这是因为侧面div上的1px边框。这使得div大于20％，超过父母的100％。

你可以通过使内容小一点来解决这个问题，以便为额外的4px腾出空间，因为两边的div都有1px的边框：

#content {
    width : 58%; 
    float: left;
}

漂浮剩下的所有div更干净。你会得到相同的结果。

带div的宽度和高度（百分比）

4 个答案: