CSS保持左右两个DIV？

Question

来源是:

<article>  

<div class="field field-name-body field-type-text-with-summary field-label-hidden">
  <div class="field-items">
    <div class="field-item even" property="content:encoded">

     Text at LEFT

    </div>
  </div>
</div>

<div class="field field-name-field-image field-type-image field-label-hidden">
  <div class="field-items">
    <div class="field-item even">

      <img src="right.jpg" alt="at RIGHT" />

    </div>
  </div>
</div>

</article>

如何更改 CSS 以使两个 DIV 看起来像？

+--------------+--------+
|Text at LEFT  |    ####|
|              |    ####|
|              |    ####|
|              |        |
|              |        |
+--------------+--------+

即文本在左侧 DIV 的左上角点亮，图像在右侧 DIV 的右上角对齐。

更新:

我正在使用类似的东西:

.field-name-body {
    width: 320px;
    float: left;    
}

.field-name-field-image {
    width: 300px;
    float: right;
}

但我不确定如何保护上述类不污染 css 全局 namespace 。我希望我可以将 float left 和 float right 限制在 article 范围内......

Answer 1

要使文本左对齐或右对齐，请使用

.text-left{
    text-align:left;
}
.text-right{
    text-align:right;
}

并使元素向左或向右

.fl{
    float:left;
}
.fr{
    float:right;
}

祝你好运!