2013-04-24 3 views
0

Я пытаюсь создать раскладку из двух столбцов с изображением слева и текстом справа в wordpress. Это должно быть максимальная ширина 600 пикселей, изображения будут иметь фиксированный размер 250px в ширину и 142px в высоту, и у меня будет изображение/текст, повторенный ниже, так как на этом сайте http://housemusicpodcasts.co.uk/latest-podcasts/Отображение изображений и текста в столбце wordpress

Все мои попытки привели к текст просто появляется под изображениями. Я хотел бы просто иметь возможность html/css без необходимости изменять основные файлы.

EDIT: Ok У меня есть этот код, но он не соответствует правильности, любые идеи, что мне нужно изменить?

<div class="pod"> 
<div class="singleblock"> 
<div class="wp-caption align:left;" style="width: 250px;"><img title="TEST" alt=""  src="http://www.djdavestewart.com/site/wp-content/uploads/2013/04/test.jpg" width="250" height="142" hspace="5" vspace="5" /> 
<p class="wp-caption-text">TEST CAPTION</p> 

</div> 
<p>TEXT HERE</p> 
<p style="text-align:right;">Read More....</p> 
</div> 
</div> 

<div class="pod"> 
<div class="singleblock"> 
<div class="wp-caption align:left;" style="width: 250px;"><img title="TEST" alt="TEST" src="http://www.djdavestewart.com/site/wp-content/uploads/2013/04/test.jpg" width="250" height="142" hspace="5" vspace="5" /> 
<p class="wp-caption-text">TEST CAPTION</p> 

</div> 
<p style="text-align: left;">TEXT HERE</p> 
<p style="text-align: right;">Read More....</p> 
</div> 
</div> 

CSS

.pod p { 
margin: 0px; 
padding: 0px; 
float: left; 
clear: right; 
} 

.singleblock { 
float:left; 
clear:left; 
margin-bottom: 10px; 
} 

Любое руководство будет высоко ценится.

Гэри

+0

Подробнее о: [Z-индекс] (http://www.quackit.com/css/properties/css_z-index.cfm) –

ответ

0

для каждой пары изображений/текста, поместите их в DIV. поставить класс на этой DIV, и об использовании этого CSS

.yourdive img{ 
    float : left; 
} 
+0

благодарственных Ты, я дам ему – Gary

Смежные вопросы