CSS, чтобы сохранить два DIVs влево и вправо?

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, чтобы сделать два DIVs выглядеть?

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

т.е. Текст сойти сверху налево на левом DIV, изображение, чтобы выровнять верхний правый на правой DIV.

UPDATE:

Я использую что-то вроде:

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

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

, но я не знаю, как защитить вышеупомянутого класса от загрязняя CSS глобального пространства имен. Я хочу, я могу ограничить float left и float right в пределах article сферы ...

Answer 1

JSBIN

С вашего DOM, вы можете использовать другую Переднюю раму. Итак, вы должны определить css для восстановления DOM. И добавьте следующий класс.

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

Answer 2

Попробуйте CSS:

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

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

Answer 3

.field{ display:inline-block} 

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

} 

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

} 

Answer 4

Чтобы сделать текст Выровнять влево или вправо используйте

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

и сделать элемент влево или вправо

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

Good Luck!

Answer 5

Когда вы пишете float:left, он плавает содержимое до самой левой части и плавает к самой правой части для float:right, независимо от ширины контейнера. Поэтому, если ширина контейнера больше, чем ширина его детей, вы заметите оставшийся пробел.

Добавить следующее для выравнивания по правому краю.

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

Ниже приведены возможные решения для этого:

Solution1:

Поплавок обе дивы налево.

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

See DEMO here.

Solution2

Дайте надлежащую ширину в контейнер.

.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;.

Использование гибкого:

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