0

这是我第一次在网页上使用 CSS，我遇到了对齐问题。问题是，每当我调整正在查看网页的窗口大小时，页面上的元素都会失去对齐，因为它们被设置为固定宽度。我有三个 CSS 类，如下所述。

.left {
      width: 30%;
      float: left;
      text-align: right;
}
.right {
      width: 65%;
      margin-left: 10px;
      float:left;
}
.center {
    width: 87%;    
    text-align: center; 
}

我该如何解决这个问题，以便我的标题（使用“中心”类在我的文本框正上方保持对齐（使用“右”类）

4

1 回答 1

0

您可以使用 jquery 并在窗口调整大小时计算填充和所有内容。

这是一个例子：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
#alwaysCentered{
background: #D4D4D4;
width: 175px;
text-align: center;
}
</style>
</head>
<body>
<div id="alwaysCentered">I will always be centered</div>

<script>
alwaysCenteredMarginLeft = ($(window).width() - $('#alwaysCentered').width()) / 2
alwaysCenteredMarginTop = ($(window).height() - $('#alwaysCentered').height()) / 2;
    $('#alwaysCentered').css({
        'margin-left' : alwaysCenteredMarginLeft,
        'margin-top' : alwaysCenteredMarginTop
    });

    window.onresize = function(event) {
    alwaysCenteredMarginLeft = ($(window).width() - $('#alwaysCentered').width()) / 2
alwaysCenteredMarginTop = ($(window).height() - $('#alwaysCentered').height()) / 2;
    $('#alwaysCentered').css({
        'margin-left' : alwaysCenteredMarginLeft,
        'margin-top' : alwaysCenteredMarginTop
    });
}
</script>
</body>
</html>
于 2013-07-26T01:20:39.073 回答