Episerver contentarea块水平

Question

当我将块放入我的内容区域时，块对齐得很好，但在编辑模式中 "edit-boarder" 变得混乱。

有人知道如何解决这个问题吗？

详情见图片

http://postimg.org/image/7wyue4nvv/

contentarea、块和css的代码：

http://pastebin.com/BsZQQ6b1

问候西蒙

Answer 1

这通常是因为使用了float而没有使用clear。我通过写类似的东西解决了类似的问题：

@if (PageEditing.PageIsInEditMode)
{
   <div class="clearfix"></div>
}

在视图中。

如果错误在 ContentArea 内，您可以使用自定义 ContentAreaRenderer 来更改标记。请参阅下面的示例：

https://github.com/valdisiljuconoks/EPiBootstrapArea/blob/master/BootstrapAwareContentAreaRenderer.cs

https://github.com/valdisiljuconoks/EPiBootstrapArea/blob/master/Initialization/SwapRendererInitModule.cs

我在 RenderContentAreaItems 方法底部的 ContentAreaRenderer 中有这段代码：

if (PageEditing.PageIsInEditMode)
{
   var clearDivTag = new TagBuilder("div");
   clearDivTag.MergeAttribute("style", "clear: both;");
   htmlHelper.ViewContext.Writer.Write(clearDivTag.ToString());
}

Answer 2

我的解决方案

主要问题是要充分理解 episerver 如何呈现内容区域和与 css 一致的块。检查 epi 呈现给浏览器的 html 很重要，这将是内容区域本身的一个 div，一个额外生成的（这是需要的，epi 说他们自己选择了渲染出来，你不能做任何事情）div 用于编辑模式包装器，然后是你的块。

在编辑模式下，网站内容实际上是在 iframe 中，因此将在每个 individual 块的 epi-edit 包装器之后加载。如果你的块看起来像我的，浮动的，epi-wrapper 将与任何浮动元素一起工作，并且不理解内容的高度。长话短说;将 class 添加到样式为 "overflow: hidden;" 的内容区域标签以修复浮动，然后删除块包装器 div（不需要）并使用 epi-rendered div 为此！使用可以放在内容区域渲染标记上的匿名对象执行此操作，如下所示：new { CssClass = "classnamewithoverflow", ChildrenCssClass = "blocknamewithfloat" }）。

这显然只适用于相同宽度的块，但让不同的块宽度工作是另一回事:-)

Episerver contentarea块水平

Episerver contentarea block horizontal

block

episerver

css-float