将绝对布局转换为使用浮点 [英] Converting absolute layout to use floats

问题描述

我正在寻找有关我正在进行的项目的建议，并将感谢任何帮助。

目标：

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

问题：

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

解决方案：

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

示例：

在CMS系统中，用户通过在网格上绘制框创建以下布局： / p>

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;位置：相对; width：916px;}。contentBlock {border：1px solid orange; box-sizing：border-box;颜色：橙色; font-size：2em; text-align：center;}。contentBlock：after {content：; display：inline-block;高度：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 =contentBlockid =contentBlock1> 1< / div> < div class =contentBlockid =contentBlock2> 2< / div> < div class =contentBlockid =contentBlock3> 3< / div> < div class =contentBlockid =contentBlock4> 4< / div> < div class =contentBlockid =contentBlock5> 5< / div> < div class =contentBlockid =contentBlock6> 6< / div>< / div>  

用户现在点击发布按钮，布局将转换为使用 float s 定位。生成的HTML不能使用 absolute 定位，因为如果2或4的内容扩展，它们将超过/低于3和6. Float 保持流中的元素，并意识到彼此，因此下面将适应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;颜色：橙色; font-size：2em; text-align：center;}。contentBlock：after {content：; display：inline-block;高度：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 =contentBlockid =contentBlock1> 1< / div> < div id =contentContainer1> < div class =contentBlockid =contentBlock2> 2< / div> < div class =contentBlockid =contentBlock3> 3< / div> < / div> < div class =contentBlockid =contentBlock4> 4< / div> < div class =contentBlockid =contentBlock5> 5< / div> < div class =contentBlockid =contentBlock6> 6< / div>< / div>  

不能期望用户理解浮动元素的工作原理，因此，当发布更改时，此过程需要是自动的。

这个特定的例子很简单，虽然更高级的布局也需要处理。

其他CMS系统做什么：

据我所知，大多数CMS系统到一个设置模板或使用JavaScript构建页面以设置绝对定位的元素的高度/位置（我想避免）。

我的问题：

• 可以设定一组规则


• 如果有任何现有的CMS可以执行此操作？


• 有关处理此问题的其他方法的任何建议

  解决方案

  p> 第一：我不认为将绝对布局转换为float是最好的方法。
  
  
  

  第二：我相信您想要的工具构建将需要用户学习如何使用它。这说明你想让它简单到不熟悉HTML / CSS概念的人能够使用它。因此，您需要使用这个工具基于简单易懂的概念，用户可以使用它来构建外观，并生成其后的代码。

  
  
  

  我可以想到的是：

  
  
  
  
  
  • 阻止/容器
  
  
  • 列
  
  
  • height / width
  
  
  • margin / padding
  
  
  
  
  

  使用户能够创建具有以下属性的块：内容宽度/高度边距/填充的列数。

  
  
  

  以下是您的示例的工作原理：

  
  
  

  标题：

  
  
  

  用户创建一个块并赋予它以下属性：

  
  
  
  
  
  • width：100％
  
  
  • height：80px（可以通过拖动元素边框完成）
  
  
  • 列数2（一个用于徽标，一个用于菜单）
  
  
  
  
  

  strong>

  
  
  

  用户使用以下属性在标题下创建一个新块：

  
  
  
  
  
  • width：100％
  
  
  • height：adaptive
  
  
  • 列数：3（第1列和第3列：宽度15％ width）
  
  
  
  
  

  页脚

  
  
  
  / p>
  
  

  生成代码：

  
  
  

  您知道每个块的列数，它们的宽度，因此您可以轻松地为每个创建一个div，并使用float / width来并排放置它们。对于高度：用户可以设置固定的高度，并且他不会难以理解内容可以溢出。所以如果他不想要他必须选择自适应高度（ height：auto; 在 css ）。

  
  
  

  结论：

  
  
  

  这是一个非常普遍的想法和简单的概念。主要工作将在UI设计和你将提示/教导用户使用您的工具来构建布局的方式。记住你是谁，以及他们将如何在不同的情况下作出反应。使用你最好的UI技能来提示/教导正确的使用方式。

  
  

  I’m looking for some advice on a project I am working on and would be appreciative of any assistance.

  Aim:

  To make a drag and drop CMS which allows a user to draw elements on a grid and move them into the desired position. The changes are recorded in JSON format and converted into HTML/CSS when the user presses a publish button. The resultant HTML should be clean and flexible (i.e. cater for content that will vary in height/length). The system should be able to handle creating e-Commerce sites as well as simple information sites.

  Problem:

  The logical way to achieve a drag and drop system in HTML is to use absolute positioning with set widths and heights; this method doesn't lend itself to the finished site as the content is likely to be of variable lengths and as absolutely positioned elements are taken out of the flow of the document they are unaware of the elements around them.

  Solution:

  Create a system which converts the absolutely positioned elements into floated elements.

  Example:

  In the CMS system the user creates the following layout by drawing boxes on a grid:

  1. Header of fixed height
  2. Navigation of variable height
  3. Image of fixed height
  4. Main content of the page of variable height
  5. List of visited items of variable height
  6. Footer of fixed height

  Absolute layout:

  The HTML/CSS would be something like this:

  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>

  The user now hits the publish button and the layout will be converted to use floats instead absolute positioning. The resultant HTML cannot use absolute positioning because if the content in 2 or 4 expands they will go over/under 3 and 6. Floats keep the elements in the flow and aware of each other so the following would cater for the dynamic content in 2 and 4:

  Floated layout:

  The HTML/CSS would be something like this:

  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>

  It cannot be expected for the user to understand how floating elements work, so this process would need to be automatic when the changes are published.

  This particular example is quite simple, although more advanced layouts would need to be handled as well.

  What other CMS systems do:

  As far as I can tell, most CMS systems either fix the user into a set template or build the page using JavaScript to set the heights/position of absolutely positioned elements (which I would like to avoid).

  My questions:

  • Is it possible to devise a set of rules to convert an absolute layout to a floated one?
  • If so are there any existing CMS that do it?
  • Any suggestions on other ways to tackle this issue?

  Thanks.

  解决方案

  First : I don't think "converting" an absolute layout to float is the best approach. You should think floats from the beginning and hint/teach the user to build the layout accordingly.

  Second : I believe the tool you want to build will need the users to learn how to use it. This said you want to make it simple enough for people not familiar with HTML/CSS concepts to be able to use it. So you need to base the use of this tool on simple and understandable concepts that users can use to build the "look" and you to generate the code behind it.

  Ones I can think of are :

  • blocks/container
  • columns
  • height/width
  • margin/padding

  Now using these concepts you could enable the user to create blocks with properties : number of columns for the content width/height margin/padding. The user can then nest blocks indefinitly with these properties and drag-drop content inside them.

  Here is how it could work for your example :

  Header :

  The user creates a block and gives it these properties :

  • width:100%
  • height:80px (this can be done by draging the elements border)
  • number of columns 2 (one for the logo and one for the menu)

  Main :

  The user creates a new block under the header with these properties :

  • width:100%
  • height: adaptive
  • number of columns : 3 (col 1 and 3 : 15% width, col 2 70% width)

  Footer

  New block with same properties as the header.

  The use can then start again inside each block/column and can nest new ones with the same properties

  Generating the code :

  You know the number of columns of each block and their widths so you can easily create a div for each and use floats/width to position them side by side. For the heights : the user can set a fixed height and it won't be difficult for him to understand that the content can overflow. So if he doesn't want that he must select the "adaptive" height (height : auto; in css).

  Conclusion :

  This is a very general idea and simple concept. The main work will be on the UI design and the way you will hint/teach the user to build layouts with your tool. Keep in mind who you are disigning for and how they would react in different situations. Use your best UI skills to hint/teach the use in the right direction.

  这篇关于将绝对布局转换为使用浮点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！