來源是：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

相關問題