Javascript 综合百分比+；像素div布局 > 10年前，我在C++中编写了一个GUI布局引擎，我很好奇它的功能如何能在浏览器中最接近。>P/> 1.C++

在旧的GUI库（如）中，小部件的位置和大小通常由四个数字给出：左、上、宽和高。我的引擎的不同之处在于，每个数字都是两倍的，所以你必须指定八个数字：相对左、绝对左；相对顶、绝对顶；相对宽度、绝对宽度；相对高度和绝对高度。相对值应以父窗口小部件宽度或高度的百分比给出，而绝对值应以像素给出。对于顶级窗口，“父窗口小部件”是桌面

示例：

a） 400 x 300像素窗口，以屏幕为中心：

const int WINDOW_WIDTH = 400;
const int WINDOW_HEIGHT = 300;
CWindow mainWindow;
mainWindow.setPosition(0.5, -WINDOW_WIDTH / 2, 0.5, -WINDOW_HEIGHT / 2); 
mainWindow.setSize(0.0, WINDOW_WIDTH, 0.0, WINDOW_HEIGHT);

b） 主窗口右边缘150像素宽的按钮容器面板：

const int PANEL_WIDTH = 150;
CPanel buttonPanel(mainWindow);
buttonPanel.setPosition(1.0, -PANEL_WIDTH, 0.0, 0); 
buttonPanel.setSize(0.0, PANEL_WIDTH, 1.0, 0);

c） 容器面板顶部有三个按钮（新建、打开、保存），底部有一个按钮（退出）：

const int BUTTON_HEIGHT = 30;
CButton newButton(buttonPanel, "New");
newButton.setPosition(0.0, 0, 0.0, 0 * BUTTON_HEIGHT);
newButton.setSize(1.0, 0, 0.0, BUTTON_HEIGHT);
CButton openButton(buttonPanel, "Open");
openButton.setPosition(0.0, 0, 0.0, 1 * BUTTON_HEIGHT);
openButton.setSize(1.0, 0, 0.0, BUTTON_HEIGHT);
CButton saveButton(buttonPanel, "Save");
saveButton.setPosition(0.0, 0, 0.0, 2 * BUTTON_HEIGHT);
saveButton.setSize(1.0, 0, 0.0, BUTTON_HEIGHT);
CButton exitButton(buttonPanel, "Exit");
exitButton.setPosition(0.0, 0, 1.0, -1 * BUTTON_HEIGHT);
exitButton.setSize(1.0, 0, 0.0, BUTTON_HEIGHT);

当你还不熟悉这种布局代码时，手工编写这种布局代码可能会感到尴尬，但一旦你掌握了窍门，就很容易了

2.HTML、CSS、JavaScript 这就是我迄今为止能够破解的东西：

a） 主窗口、按钮面板和按钮的层次结构以HTML表示：

<div id="mainWindow">
    <div id="buttonPanel">
        <div id="newButton" class="button"></div>
        <div id="openButton" class="button"></div>
        <div id="saveButton" class="button"></div>
        <div id="exitButton" class="button"></div>
    </div>
</div>

c） 布局功能是在JavaScript中使用jQuery实现的：

function setPosition(widget, relLeft, absLeft, relTop, absTop) {
    $(widget)
        .css('left', relLeft * 100 + '%').css('left', '+=' + absLeft + 'px')
        .css('top', relTop * 100 + '%').css('top', '+=' + absTop + 'px');
}

function setSize(widget, relWidth, absWidth, relHeight, absHeight) {
    $(widget)
        .css('width', relWidth * 100 + '%').css('width', '+=' + absWidth + 'px')
        .css('height', relHeight * 100 + '%').css('height', '+=' + absHeight + 'px');
}

function setButtonText(button, text, height) {
    $(button)
        .text(text)
        .css('text-align', 'center')
        .css('vertical-align', 'middle')
        .css('line-height', height + 'px');
}

window.onresize = function () {
    var WINDOW_WIDTH = 400,
        WINDOW_HEIGHT = 300,
        PANEL_WIDTH = 150,
        BUTTON_HEIGHT = 30;

    setPosition('#mainWindow', 0.5, -WINDOW_WIDTH / 2, 0.5, -WINDOW_HEIGHT / 2);
    setSize('#mainWindow', 0.0, WINDOW_WIDTH, 0.0, WINDOW_HEIGHT);
    setPosition('#buttonPanel', 1.0, -PANEL_WIDTH, 0.0, 0);
    setSize('#buttonPanel', 0.0, PANEL_WIDTH, 1.0, 0);
    setButtonText('#newButton', "New", BUTTON_HEIGHT);
    setPosition('#newButton', 0.0, 0, 0.0, 0 * BUTTON_HEIGHT);
    setSize('#newButton', 1.0, 0, 0.0, BUTTON_HEIGHT);
    setButtonText('#openButton', "Open", BUTTON_HEIGHT);
    setPosition('#openButton', 0.0, 0, 0.0, 1 * BUTTON_HEIGHT);
    setSize('#openButton', 1.0, 0, 0.0, BUTTON_HEIGHT);
    setButtonText('#saveButton', "Save", BUTTON_HEIGHT);
    setPosition('#saveButton', 0.0, 0, 0.0, 2 * BUTTON_HEIGHT);
    setSize('#saveButton', 1.0, 0, 0.0, BUTTON_HEIGHT);
    setButtonText('#exitButton', "Exit", BUTTON_HEIGHT);
    setPosition('#exitButton', 0.0, 0, 1.0, -1 * BUTTON_HEIGHT);
    setSize('#exitButton', 1.0, 0, 0.0, BUTTON_HEIGHT);
};

onresize();

注意，JavaScript代码与上面所示的C++代码非常相似！p> 我的问题 这种基于JavaScript的布局是否可以用于构建“真正”的web应用程序，还是应该改用CSS？因为我基本上是一个桌面应用程序开发人员，所以我需要网络开发专家的意见。谢谢

==更新===

---

是一个纯HTML+CSS解决方案。我使用了@Christoph建议的负边距技巧。我唯一的问题是相同的常量被复制到CSS中的很多地方。例如，按钮高度（30px）用于九个位置，这使得维护更加困难

使用CSS设置初始值总是更容易、更快速、更高效。将所有内容设置为绝对可以工作，但根据应用程序的不同，可能会成为布局噩梦，因为绝对定位的元素会从正常流中删除

虽然我知道你从哪里来，曾经为桌面编写过图形应用程序，但你会发现它对web不起作用，除非你期望一个布局性能不重要的固定布局

但是，我在思考当今世界的布局，在这个世界上，你需要适应各种形状和大小的设备。一方面，使用javascript可以更容易地控制所有这些，而且很多时候这是最好的方法，但是，otoh，CSS可以通过媒体查询来处理这些问题，从而减轻您和您的编码负担

---

这需要考虑很多。

我肯定不是专家，但这是我的2美分：

在您的设计中使用JavaScript一直都很好。但是为了做到这一点，您还需要一些静态CSS，对于所有那些没有启用JavaScript的人来说，对于可访问性之类的问题

Javascript设计一直都是关于增强web应用程序，而不是取代它。你绝对应该看看这个维基百科页面

回到您的问题上来，为什么不让您的按钮在默认情况下具有固定大小，并在可用时让您的JavaScript功能替换它呢

---

另外，我在您的web应用程序中没有看到的是，在这里，一切都可以用CSS完成，而且速度更快。它会有更好的性能，您甚至不必担心JavaScript。

一般来说，内联css（通过

style=”“

附加的css）被认为是一个错误的选择。因为您可以通过脚本动态生成它，所以这可能是可以接受的

但是，也存在一些问题：

一般来说，绝对定位应尽可能少用

绝对不需要在

window.onresize

中更改布局。应极其小心地使用此事件。正如您在fiddle中看到的，您的示例UI相当小，但在调整窗口大小时已经变得不响应。（您的示例中的这些值无论如何都是静态的）

因此，我的提示是：

使用某种

init（）

方法进行初始布局

避免

window.onresize

或至少使用一些超时机制来减少这些绘制事件的触发（）

也许可以用一个简单的方式为元素编写css，而不是jQuery的

css（）

调用

最佳解决方案：在服务器端生成html和css标记，并将最终的html+css提供给浏览器。优点：更快的渲染+可维护+您可以获得可缓存的样式表和html

简短答复:

这太糟糕了！永远不要那样做

长答覆：

这不是网络的工作方式。你的应用程序不会表现得很好，因为css规则会等待js被下载和解释；但这并不是这里主要关注的问题。主要关心的是你

您将永远无法维护这样的代码。当您构建一个简单的应用程序时，您可以轻松地使用数千条css规则。如果按这种方式组织，则无法阅读。我甚至没有提到媒体查询的事情。以这种方式构建应用程序的复杂性太高了

如果你想进入网络，你必须拥抱网络；不要尝试旧的桌面应用程序开发技巧（这对于桌面应用程序来说非常有用）。例如，如果你想在右上角放点东西，你可以选择：

right:0

。非

窗口宽度
；如果你的蚂蚁想集中注意力，你有很多方法；