-1

我想将我的网页水平分成两部分，我的显示器布局是 1410 X 752，如果我这样写 css 代码

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


它不会在其他显示器上正常工作，而且当我放大/缩小浏览器时，页面结构将完全乱序我的意思是左 DIV 向下移动，它将在右 DIV 下！我知道我必须使用 % 但是当放大/缩小浏览器滚动条时没有出现，请查看此地址以查看我所说的内容。我该怎么办 ？

谢谢。

4

3 回答 3

2

首先，你并没有告诉你的 div 去任何地方。他们只是将自己堆叠在彼此之上。

但是，您确实有正确的开始和方法，尽管应该对其进行修改以适应当前的最佳实践。让我详细说明...

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

.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% 就会坏掉。

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

浮动属性信息-> http://www.w3.org/wiki/CSS/Properties/float 显示属性信息-> http://www.w3.org/wiki/CSS/Properties/display 框信息-尺寸属性 - > http://www.w3.org/TR/css3-ui/#box-sizing

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

于 2013-06-03T19:50:42.033 回答
2

你应该使用%而不是px这里是一个简单的例子。

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

(1200 * 100) / 1410 = 85%（或多或少......正确答案将是 85.71428571428571 %，但真的没关系）。

HTML

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

CSS

。剩下 {
    向左飘浮;
    宽度：15%；
    背景：绿色；
    高度：300px；
}
。正确的 {
    向左飘浮;
    宽度：85%；
    背景：蓝色；
    高度：300px；
}

活生生的例子。

于 2013-06-03T19:37:04.800 回答
1

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

构建 ypour 布局的不同方法有助于使用像素，例如：

显示：表格单元格：您需要设置最小的像素大小，并将其他设置为 100% 以将小一个缩小到它的大小。

浮动：
在第一个元素上设置浮动和宽度。第二个元素可以保留在流中，没有大小和溢出：隐藏；保留浮动元素并使用所有剩余空间。

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

于 2013-06-03T19:45:58.427 回答