Question

我想将我的网页水平划分为2个部分，我的显示器布局是1410 X 752，如果我写这样的CSS代码

.left{
width:210px;
}
.right{
width:1200px;
}

它在其他显示器上无法正常工作，当我放大/缩小浏览器时，页面结构将完全失灵，我的意思是左侧DIV向下移动，它将在右侧DIV下方！我知道我必须使用％但是当放大/缩小浏览器滚动条没有出现时，请检查this address以查看我说的内容。我该怎么办？

感谢。

Answer 1

您应该使用%代替px这是一个简单的示例。

如果您使用的是1410显示器中的1200，那么我们使用数学来获得相对于该宽度的%

（1200 * 100）/ 1410 = 85％（或多或少......正确的答案是85.71428571428571％，但实在无关紧要。）

<强> HTML

<div class="left"></div>
<div class="right"></div>

<强> CSS

.left {
    float: left;
    width: 15%;
    background: green;
    height: 300px;
}
.right {
    float: left;
    width: 85%;
    background: blue;
    height: 300px;
}

<强> Live example.

Answer 2

首先，你并没有告诉你的div去任何地方。他们只是把自己堆叠在一起。

但是，您确实有正确的开始和方法，但应修改它以适应当前的最佳做法。让我详细说明......

要使代码正常工作，您需要添加一个float属性，将代码更改为：

.left{
float: left;
width:210px;
}
.right{
float: left; /* could also put "right" here as a value */
width:1200px;
}

现在有了这样说......一个更好的选择会产生相同的结果：

.left{
display: inline-block;
width:210px;
}
.right{
display: inline-block;
width:1200px;
}

让我们更进一步......虽然这将“奏效”，但在其他人的屏幕上看起来会很糟糕。如果我的分辨率是1280x1024，这并不像你的那么宽。我必须向右滚动才能看到您的网站。这将鼓励人们离开您的网站。我们可以解决这个问题......

.left{
display: inline-block;
width: 20%;
}
.right{
display: inline-block;
width: 80%;
}

现在，无论您的浏览器窗口有多大，您的div将占据屏幕右侧的80％，以及屏幕左侧的20％。注意这将取决于良好的reset.css，因为默认情况下元素的宽度不包括任何填充，边距或边框空间。如果添加填充或边距或边框，则上述方法将中断。为了解决这个问题，有一些选择。您可以对填充和边距使用％值，但如果添加边框则会中断。

一个常见的解决方案是将此属性添加到您的css：

.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
}
.right{
display: inline-block;
width: 80%;
box-sizing: border-box;
}

这将解决上面提到的任何填充或边距空间问题，但您仍需要考虑边距空间。假设你想要两者之间有5％的装订线，那么你需要这个代码：

.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
margin-right: 5%;
}
.right{
display: inline-block;
width: 75%;
box-sizing: border-box;
}

请注意我如何从右列中减去5％以合并边距空间。如果你把它全部添加20 + 5 = 25 25 + 75 = 100％100％意味着它可以工作，如果它超过100％就会中断。

进行额外阅读，以便进行一些研究（谷歌）响应式布局/网页设计。

浮动资产的信息 - ＆gt; http://www.w3.org/wiki/CSS/Properties/float 显示属性信息 - ＆gt; http://www.w3.org/wiki/CSS/Properties/display 有关盒子尺寸属性的信息 - ＆gt; http://www.w3.org/TR/css3-ui/#box-sizing

确定浏览器兼容性的一个很好的资源是http://caniuse.com/

Answer 3

正如大家所说，你应该使用百分比，因为你的窗口浏览器永远不会做你的屏幕大小，除非它全屏设置。
然后滚动条可能会出现。
％百分比是安静的，如果你总是管理一点不到100％（从百分比到像素计算，可以添加额外的像素）。

不同的构建ypour布局的方法可以帮助使用像素，如：

显示：table-cell：您需要设置最小像素的大小，并将其他像素设置为100％，以缩小其大小。

浮动：
在第一个元素上设置float和width。第二个元素可以保留在没有大小和溢出的流中：隐藏;保留浮动元素并使用剩下的所有空间。

如果你需要一个小提琴来得到这个想法，请问。

如何使用像素水平划分网页？

3 个答案: