JSBIN

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

试试这个css：

.field-type-image
{
    float: right;
    vertical-align:top;
}

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

Answer 3

JSBIN

从您的DOM中，您可以使用其他Front框架。所以，你应该定义css来重新设置DOM。并添加以下类。

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

Answer 4

.field{ display:inline-block}

.field-type-image .field-item
{
    float: right;

}

.field-type-text-with-summary .field-item
{
    text-align:left;

}

Answer 5

当你写float:left时，它会将内容浮动到最左边的部分并浮动到float:right的最右边部分，而不管容器的宽度如何。因此，如果容器的宽度超过其子容器的宽度，您将注意到剩余的间隙。

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

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

以下是可能的解决方案：

<强>解决方法1：

将两个div向左浮动。

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

See DEMO here.

<强>溶液2

为容器指定适当的宽度。

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

See DEMO here.

希望它有所帮助。

Answer 6

使用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;
}

CSS保持左右两个DIV？

6 个答案:

JSBIN