那些遇到过的问题

转换绝对布局以使用浮动

Hid*_*bes 23 html javascript css jquery css-float

我正在寻找关于我正在进行的项目的一些建议,并会感谢任何帮助.

目标:

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

问题:

在HTML中实现拖放系统的逻辑方法是使用absoluteset widths和heights进行定位; 由于内容可能具有可变长度,并且由于绝对定位的元素从文档流中取出而不知道它们周围的元素,因此该方法不适合于完成的站点.

解:

创建一个系统,将绝对定位的元素转换为浮动元素.

例:

在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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

用户现在点击发布按钮,布局将转换为使用floats而不是absolute定位.生成的HTML不能使用absolute定位,因为如果2或4中的内容扩展,它们将超过/低于3和6. Floats将元素保留在流中并相互了解,以便以下将满足2和4中的动态内容:

浮动布局:

浮动布局

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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

用户无法理解浮动元素的工作原理,因此在发布更改时需要自动执行此过程.

这个特殊的例子很简单,虽然也需要处理更高级的布局.

其他CMS系统的功能:

据我所知,大多数CMS系统要么将用户修复为设置模板,要么使用JavaScript构建页面来设置绝对定位元素的高度/位置(我想避免).

我的问题:

  • 是否可以设计一组规则来将绝对布局转换为浮动布局？
  • 如果是,那么有任何现有的CMS可以做到吗？
  • 关于解决这个问题的其他方法的任何建议？

谢谢.

web*_*iki 6

第一:我不认为"转换"绝对布局是浮动是最好的方法.您应该从一开始就考虑浮动,并提示/教导用户相应地构建布局.

第二:我相信你想要构建的工具需要用户学习如何使用它.这说明你想让不熟悉HTML/CSS概念的人能够使用它.因此,您需要将此工具的使用基于简单且易于理解的概念,用户可以使用这些概念构建"外观"并生成其背后的代码.

我能想到的是:

  • 块/容器
  • 列
  • 高度宽度
  • 余量/填充

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

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

标题:

用户创建一个块并为其提供以下属性:

  • 宽度:100%
  • 高度:80px(这可以通过拖动元素边框来完成)
  • 第2列(一个用于徽标,一个用于菜单)

主要:

用户使用以下属性在标题下创建新块:

  • 宽度:100%
  • 身高:适应性
  • 列数:3(第1列和第3列:宽度为15%,第2列为70%)

页脚

具有与标题相同属性的新块.

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

生成代码:

您知道每个块的列数及其宽度,以便您可以轻松地为每个块创建一个div,并使用浮动/宽度将它们并排放置.对于高度:用户可以设置固定的高度,并且他不难理解内容可能溢出.因此,如果他不想要他必须选择"自适应"高度(height : auto;在css中).

结论:

这是一个非常一般的想法和简单的概念.主要工作将是UI设计以及您将提示/教导用户使用您的工具构建布局的方式.请记住您的辞职人员以及他们在不同情况下的反应.使用您最好的UI技能来提示/教导正确使用方向.

Wis*_*Kik 4

有一个名为Weebly的网站创建工具，它具有您正在寻找的相同功能。它是免费的，因此您可以查看以了解有关其功能的更多信息。

你问的问题实在是太模糊了，所以我把答案分成几个部分：

1- 对于拖放功能：

这正是您正在寻找的：Gridster

您可以让用户在保持约束的同时调整框的大小。

2-如果您正在寻找一个干净的 CSS 框架：

3-如果您正在寻找覆盖整个页面（垂直和水平）的流畅布局：

html,
body {height:100%; margin:0px; padding:0px;}
.wrapper {position:relative; height:100%; width:100%; display:block;}
.header {position:relative; height:22%; width:100%; display:inline-block; margin-bottom:3%; background:red;}
.footer {position:relative; height:22%; width:100%; display:inline-block; margin-top:3%; background:green;}
.content {position:relative; height:50%; width:100%; display:inline-block;}
.content .left_sidebar {float:left; width:17%; height:100%; position:relative; margin-right:3%; background:yellow;}
.content .right_sidebar {float:right; width:17%; height:100%; position:relative; margin-left:3%; background:purple;}
.content .middle {float:left; width:60%; height:100%; position:relative; background:cyan;}

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.clearfix {display:inline-table;}
	
/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
   /* Hides from IE-mac \*/
   * html .clearfix {height:1%;}
   .clearfix {display:block;}
   /* End hide from IE-mac */
Run Code Online (Sandbox Code Playgroud) 
<div class="wrapper">
    <div class="header">Header</div>
    <div class="content">
        <div class="left_sidebar">Left Sidebar</div>
        <div class="middle">Middle</div>
        <div class="right_sidebar">Right Sidebar</div>
        <div class="clearfix"></div>
    </div>
    <div class="footer">Footer</div>
</div>
Run Code Online (Sandbox Code Playgroud)

请记住，这样做会破坏移动设备上的用户体验。

归档时间：

查看次数：

2034 次

最近记录：

10 年，6 月 前
相关归档
如何随机化(shuffle)一个JavaScript数组？ 1138
适用于Firefox的自定义CSS滚动条 290
我是否需要在CSS中包含字体系列名称的引号？ 87
ReferenceError: require 未在 ES 模块作用域中定义，您可以使用 import 代替 gulp sass 52
适用于Firefox的Javascript内存分析器 51
关于字符串数组的jQuery.unique 38
迭代Handlebars的对象？ 27
简单的CSS选项卡 - 需要在活动选项卡上打破边框 18
如何将图像放在一起 16
当内容包装到多行时,float的宽度不再缩小以适应 7
难疑归档
什么是依赖注入？ 2984
如何在不安装Ms Office的情况下在C#中创建Excel(.XLS和.XLSX)文件？ 1804
使当前的Git分支成为主分支 1555
如何检查字符串是否为数字(浮点数)？ 1519
如何迭代Bash中变量定义的一系列数字？ 1409
为什么Dictionary优先于Hashtable？ 1348
Git push需要用户名和密码 1327
JavaScript中是否有"null coalescing"运算符？ 1305
如何正确强制推送Git？ 1206
在Python中检查类型的规范方法是什么？ 1171