Episerver contentarea塊水平

Question

當我把塊放在我的contentarea裏時，塊很好地對齊，但是在編輯模式裏面，「編輯 - 邊境」變得混亂了。

有沒有人有任何想法如何弄清楚這一點？

見圖片瞭解更多詳情

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

代碼的含量 - 面積，塊和css：

http://pastebin.com/BsZQQ6b1

最好的問候西蒙

Answer 1

我的解決方案

主要問題是要充分理解episerver如何呈現內容區域和與css一致的塊。檢查epi呈現給瀏覽器的html是很重要的，它將是內容區本身的一個div，一個額外的生成（這是IS需要的，epi表示他們自己選擇渲染出來，而你不能做任何事情它）div的編輯模式包裝，然後你的塊。

在編輯模式下，網站內容實際上是在iframed中，並且將作爲結果加載到每個單獨塊的epi-edit封裝之後。如果你的塊看起來像我的，浮動，epi包裝將像任何浮動元素一樣行事，不理解內容的高度。長話短說;將樣式「overflow：hidden;」添加到內容區標記中修復浮動，然後刪除你的塊包裝div（這是不需要的），並使用epi渲染的div的！用你可以放在內容區域渲染標籤上的匿名對象來做到這一點，就像這樣：new {CssClass =「classnamewithoverflow」，ChildrenCssClass =「blocknamewithfloat」}）。

這顯然只能用相同寬度的塊工程進展順利，但讓不同的塊寬度的工作是另一回事:-)

Answer 2

這通常是因爲使用浮動無使用清晰。我通過編寫類似的東西解決了類似的問題：

@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

我有我的ContentAreaRenderer這段代碼在RenderContentAreaItems方法的底部：

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