0

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

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

有没有更好的方法来管理这个？

这是使用 ive 的 html/css 即时通讯，如果有人想要玩的话，我还制作了一个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;}

在此处输入图像描述

4

1 回答 1

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}
于 2013-04-08T22:11:43.027 回答