您将如何使用CMS管理此布局

Question

这些布局 - 水平对齐的文本和图像列表，在网站的功能页面上往往很受欢迎，我设计了一个并对其进行了编码，但我想到的是，当项目被移交给非技术人员时人可以轻松编辑文本，但随后将关闭文本/图像对齐。

要解决此问题，他们还需要编辑css，但这并不适合大多数人。

有没有更好的方法来管理它？

这是html / css我使用ive也发了jsfidlle如果有人想玩的话

<div class="feature">
    <p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora eaque magni obcaecati quis at corrupti perferendis eum magnam ipsum maiores quod fugit dolorum odio temporibus voluptate asperiores atque esse.</p>

    <img src="http://pictures-of-cats.org/wp-content/uploads/images/bengal-cat-RAVI-w.jpg" width="200" height="200"/>
</div>

<div class="feature">
    <p class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi tempora eaque magni obcaecati quis at corrupti perferendis eum magnam.</p>

    <img src="http://pictures-of-cats.org/wp-content/uploads/images/bengal-cat-RAVI-w.jpg" width="200" height="200"/>
</div>

CSS

#wrapper {width:500px;}

p {width:280px;}
p.left {float:left; padding:30px 0 0 0;}
p.right {float:right; padding:45px 0 0 0;}

img {float:left;}

Answer 1

使用“非技术”用户可以理解的css选择器管理您的父媒体标记。像

这样的东西

<markup class=image-left'><markup><img/></markup></markup>

然后显示客户端使用'.image-left'和/或'.image-right'

或者更好的是，从一开始就管理整个布局，确保您的“图片”向左或向右浮动，具体取决于您正在铺设的行。

CSS

.markup:nth-child(even) {style it to float image left}
.markup:nth-child(even) img {float:left;margin:0 10px 10px 0}
.markup:nth-child(odd) {style it to float image right}
.markup:nth-child(odd) img {float:right;margin:0 0 10px 10px}