Выравнивание абзаца в двух дивы с изображением между ними

Question

, как я могу согласовать свой пункт, как показано на следующем рисунке

.

Мне нужно показать газету, в которой это должно быть включено.

Ниже приведен HTML-код, я использую

<div class="left"></div> 
<div class="right"></div> 
<div class="myImage"><img src="question.png"/></div> 

и код CSS это

*{ 
margin:0; 
padding:0; 
} 

.right,.left{ 
height:300px; 
width:200px; 
float:left; 
background:red; 
margin:5px; 
} 

.myImage img{ 
width:100px; 
height:100px; 
} 

.myImage{ 
clear:both; 
position:absolute; 
top:100px; 
left:150px; 
} 

Answer 1

Создайте элемент изображения на левой стороне, плавучие справа от текста , Неправильное положение, половина ширины изображения с «margin». Затем в правом div создайте тот же эффект, используя пустой div, но инвертированный. Поплавьте div в левую часть текста и замените его налево на половину ширины. Как это:

<style> 
    .right, .left 
    { 
     width: 200px; 
     height: 300px; 
     float:left; 
    } 

    #real-img 
    { 
     width: 100px; 
     height: 100px; 
     float: right; 
     margin-right: -50px; /* half the width */ 
     margin-top: 125px; /* vertical align considering page height minus img half height */ 
    } 

    #fake-img 
    { 
     width:100px; 
     height:100px; 
     float:left; 
     margin-left: -50px; 
     margin-top: 125px; 
    } 
</style> 

И в HTML:

<div class="left"> 
    <img src="imgurl" id="real-img" /> 
    [CONTENT_TEXT] 
</div> 
<div class="right"> 
    <div id="fake-img"></div> 
    [CONTENT_TEXT] 
</div> 

Все это, конечно, учитывая, что вы жестко закодировать все размеры.