来源是：CSS保持左右两个DIV？

<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的图像。

UPDATE：

我使用的是这样的：

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

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

，但我不知道如何保护上述类从污染的CSS全局命名空间。我希望我可以限制article范围内float left和float right ...

来源

2014-10-17 ohho

我会使用类似[Flexbox的（http://css-tricks.com/snippets/css/a-guide- flexbox /） – 2014-10-17 10:24:29

@Hiral现有的CSS附加。 – ohho 2014-10-17 10:47:32

JSBIN

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

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

来源

2014-10-17 10:28:06

试试这个CSS：

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

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

来源

2014-10-17 10:25:49

.field{ display:inline-block} 

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

} 

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

}

来源

2014-10-17 10:29:06 himanshu

为了使文本左对齐或右使用

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

并作出元素向左或向右

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

祝您好运！

来源

2014-10-17 11:04:29

当您编写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.

希望它能帮助。

来源

2014-10-17 11:09:12 Hiral

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

来源

2014-10-17 11:51:28

CSS保持左右两个DIV？

回答

JSBIN

相关问题