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全局名称空间。我希望我可以将float left和float right限制在article范围内。。。

Answer 1

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

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

并使元件向左或向右

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

祝你好运！

Answer 2

对图像使用float: right或position: absolute; top: 0; right: 0;。

使用flex：

article {
    display: flex;
}
.field {
    flex: 1;
    padding: 5px; margin: 5px; border: 1px solid #acacac;
}
.field img {
    float: right;
}

使用display: table:

article {
    display: table; 
    border-spacing: 5px; border-collapse: separate;
    width: 100%;
}
.field {
    display: table-cell; height: 100%; width: 50%;
    padding: 5px; border: 1px solid #acacac;
    vertical-align: top;
}
.field img {
    float: right;
}

Answer 3

JSBIN

在您的DOM中，您可以使用其他Front框架。因此，您应该定义css来重新设计DOM的样式。并添加以下类。

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

Answer 4

试试这个css：

.field-type-image
{
    float: right;
    vertical-align:top;
}
.field-type-text-with-summary
{
    float: left;
    vertical-align:top;
}

Answer 5

.field{ display:inline-block}
.field-type-image .field-item
{
    float: right;
}
.field-type-text-with-summary .field-item
{
    text-align:left;
}

Answer 6

在编写float:left时，无论容器的宽度如何，它都会将内容浮动到float:right的最左边部分和最右边部分。所以若容器的宽度大于其子容器的宽度，你们会注意到剩余的间隙。

为右对齐的内容添加以下内容。

.field-name-field-image {
    text-align:right;
}

以下是可能的解决方案：

解决方案1:

将两个div向左浮动。

.field-name-body, .field-name-field-image {
    float: left;
}

请参阅此处的演示

解决方案2

给容器适当的宽度。

.field-name-body {
    float: left;
}
.field-name-field-image {
    float: right;
}
article{
    width: 620px;
}

请参阅此处的演示

希望能有所帮助。