javascript - 将绝对布局转换为使用 float

Question

我正在为我正在从事的元素寻求一些建议，如果有任何帮助，我将不胜感激。

目标:

制作拖放式 CMS，允许用户在网格上绘制元素并将它们移动到所需位置。更改以 JSON 格式记录，并在用户按下发布按钮时转换为 HTML/CSS。生成的 HTML 应该干净且灵活(即迎合高度/长度不同的内容)。该系统应该能够处理创建电子商务站点以及简单的信息站点。

问题:

在 HTML 中实现拖放系统的逻辑方法是使用 absolute 定位并设置 width 和 height；此方法不适用于已完成的站点，因为内容可能具有可变长度，并且由于绝对定位的元素从文档流中取出，它们不知道周围的元素。

解决方案:

创建一个将绝对定位元素转换为 float 元素的系统。

示例:

在 CMS 系统中，用户通过在网格上绘制框来创建以下布局:

1. 固定高度的标题
2. 可变高度导航
3. 固定高度的图片
4. 可变高度页面的主要内容
5. 可变高度的已访问元素列表
6. 固定高度的页脚

绝对布局:

HTML/CSS 应该是这样的:

body {
    background-color: #999999;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 70%;
    margin: 15px 0;
    padding: 0;
}
#mainContainer {
    background-color: #FFFFFF;
    height: 500px;
    margin: 0 auto;
    position: relative;
    width: 916px;
}
.contentBlock {
    border: 1px solid orange;
    box-sizing: border-box;
    color: orange;
    font-size: 2em;
    text-align: center;
}
.contentBlock:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#contentBlock1 {
    height: 120px;
    left: 0;
    position: absolute;
    top: 0;
    width: 916px;
}
#contentBlock2 {
    height: 100px;
    left: 0;
    position: absolute;
    top: 140px;
    width: 136px;
}
#contentBlock3 {
    height: 100px;
    left: 0;
    position: absolute;
    top: 260px;
    width: 136px;
}
#contentBlock4 {
    height: 220px;
    left: 156px;
    position: absolute;
    top: 140px;
    width: 604px;
}
#contentBlock5 {
    height: 220px;
    left: 780px;
    position: absolute;
    top: 140px;
    width: 136px;
}
#contentBlock6 {
    height: 120px;
    left: 0;
    position: absolute;
    top: 380px;
    width: 916px;
}

<div id="mainContainer">
    <div class="contentBlock" id="contentBlock1">1</div>
    <div class="contentBlock" id="contentBlock2">2</div>
    <div class="contentBlock" id="contentBlock3">3</div>
    <div class="contentBlock" id="contentBlock4">4</div>
    <div class="contentBlock" id="contentBlock5">5</div>
    <div class="contentBlock" id="contentBlock6">6</div>
</div>

用户现在点击发布按钮，布局将转换为使用 float 而不是 absolute 定位。生成的 HTML 不能使用 absolute 定位，因为如果 2 或 4 中的内容扩展，它们将超过/低于 3 和 6。Float 使元素保持流动并意识到因此以下内容将满足 2 和 4 中的动态内容:

float 布局:

HTML/CSS 应该是这样的:

body {
    background-color: #999999;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 70%;
    margin: 15px 0;
    padding: 0;
}
#mainContainer {
    background-color: #FFFFFF;
    margin: 0 auto;
    width: 916px;
}
.contentBlock {
    border: 1px solid orange;
    box-sizing: border-box;
    color: orange;
    font-size: 2em;
    text-align: center;
}
.contentBlock:after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#contentBlock1 {
    margin-bottom: 20px;
    height: 120px;
}
#contentBlock2 {
    height: 100px;
    margin-bottom: 20px;
    width: 136px;
}
#contentBlock3 {
    height: 100px;
    margin-bottom: 20px;
    width: 136px;
}
#contentBlock4 {
    float: left;
    height: 220px;
    margin-bottom: 20px;
    margin-left: 20px;
    width: 604px;
}
#contentBlock5 {
    float: left;
    height: 220px;
    margin-bottom: 20px;
    margin-left: 20px;
    width: 136px;
}
#contentBlock6 {
    clear: left;
    height: 120px;
}
#contentContainer1 {
    float: left;
    width: 136px;
}

<div id="mainContainer">
    <div class="contentBlock" id="contentBlock1">1</div>
    <div id="contentContainer1">
        <div class="contentBlock" id="contentBlock2">2</div>
        <div class="contentBlock" id="contentBlock3">3</div>
    </div>
    <div class="contentBlock" id="contentBlock4">4</div>
    <div class="contentBlock" id="contentBlock5">5</div>
    <div class="contentBlock" id="contentBlock6">6</div>
</div>

不能指望用户了解 float 元素的工作原理，因此在发布更改时需要自动执行此过程。

这个特定示例非常简单，但还需要处理更高级的布局。

其他 CMS 系统的作用:

据我所知，大多数 CMS 系统要么将用户固定在一组模板中，要么使用 JavaScript 构建页面以设置绝对定位元素的高度/位置(我希望避免这种情况)。

我的问题:

• 是否可以设计一套规则将绝对布局转换为 float 布局？
• 如果是，是否有任何现有的 CMS 可以做到这一点？
• 对解决此问题的其他方法有何建议？

谢谢。

Answer 1

首先:我不认为将绝对布局“转换”为 float 布局是最好的方法。您应该从一开始就考虑 float 并提示/教导用户相应地构建布局。

第二:我相信您要构建的工具需要用户学习如何使用它。这表示您想让它足够简单，以便不熟悉 HTML/CSS 概念的人能够使用它。因此，您需要将此工具的使用建立在简单易懂的概念之上，用户可以使用这些概念来构建“外观”，而您可以生成其背后的代码。

我能想到的是:

• block /容器
• 专栏
• 高度/宽度
• 边距/填充

现在使用这些概念，您可以让用户创建具有属性的 block :内容宽度/高度边距/填充的列数。然后，用户可以使用这些属性无限嵌套 block ，并将内容拖放到其中。

以下是它如何适用于您的示例:

标题:

用户创建一个 block 并赋予它这些属性:

• 宽度:100%
• height:80px(这可以通过拖动元素边框来完成)
• 列数 2(一列用于 Logo ，一列用于菜单)

主要内容:

用户使用这些属性在标题下创建了一个新 block :

• 宽度:100%
• 高度:自适应
• 列数:3(第 1 列和第 3 列:15% 宽度，第 2 列 70% 宽度)

页脚

与标题具有相同属性的新 block 。

然后可以在每个 block /列内重新开始使用，并可以嵌套具有相同属性的新 block /列

生成代码:

您知道每个 block 的列数及其宽度，因此您可以轻松地为每个 block 创建一个 div，并使用 float /宽度将它们并排放置。对于高度:用户可以设置一个固定的高度，他不难理解内容可以溢出。因此，如果他不希望他必须选择“自适应”高度(height : auto; in css)。

结论:

这是一个非常笼统和简单的概念。主要工作将是 UI 设计以及您将提示/教导用户使用您的工具构建布局的方式。请记住您是为谁而设计的，以及他们在不同情况下会如何 react 。使用您最好的 UI 技能来提示/教导正确方向的使用。