قرار دادن عکس کنار هم

[hichkas9]

سلام دوستان برنامه نویس!

دوستان من این کد رو توی single.php وردپرس دارم، این سه تا عکس زیر هم هستن، میخام کنار هم باشن، چون تابع php اومده از table نمیتونم استفاده کنم، دوستان باید چیکگار کنم؟


<div id="dlbox1">

<?php if ($dl1!="") : ?><p style="text-align: right;"><strong><a href="<?php echo $dl1; ?>"><img alt="" src="<?php bloginfo('template_url'); ?>/images/dl1.png" /></strong></a><?php endif;
if ($dl2!="") : ?><p style="text-align: right;"><strong><a href="<?php echo $dl2; ?>"><img alt="" src="<?php bloginfo('template_url'); ?>/images/dl2.png" /></strong></a><?php endif;
if ($subdl!="") : ?><p style="text-align: right;"><strong><a href="<?php echo $subdl; ?>"><img alt="" src="<?php bloginfo('template_url'); ?>/images/subdl.png" /></strong></a><?php endif; ?> </p></div>

[hichkas9]

دوستان css نویس خیلی راحت می تونند کمک کنندا!

[کامروا]

سلام

یک کلاس به هر کدوم از تگ های img اضافه کن بصورت زیر :
<?php if ($dl1!="") : ?><p style="text-align: right;"><strong><a href="<?php echo $dl1; ?>"><img class="list-img" alt="" src="<?php bloginfo('template_url'); ?>/images/dl1.png" /></strong></a><?php endif;
if ($dl2!="") : ?><p style="text-align: right;"><strong><a href="<?php echo $dl2; ?>"><img class="list-img" alt="" src="<?php bloginfo('template_url'); ?>/images/dl2.png" /></strong></a><?php endif;
if ($subdl!="") : ?><p style="text-align: right;"><strong><a href="<?php echo $subdl; ?>"><img class="list-img" alt="" src="<?php bloginfo('template_url'); ?>/images/subdl.png" /></strong></a><?php endif; ?> </p>
</div>

و در قسمت تگ استایل و یا فایل CSS ، این رو اضافه کن :
.list-img {
float: right;
}

[hichkas9]

مرسی، یادم نبود ، این روش هم میشد،

ولی یک مشکل بوجود اومد، الان کنار هم اومدن، ولی به صورت پله پله ای،یعنی عکس دومی از اولی پایین تر، و سومی از دومی، بنظرتون مشکل از چیه؟

[کامروا]

ارتفاع (height) عکس ها با هم یکی هست؟
این رو هم به کلاس list-img اضافه کن ببین درست میشه یا نه
margin-top: 0;

[hichkas9]

من برای هر عکس یک کلاس تعریف کردمک، ببین نظرت چیه؟

#list-img1{
float:right;
margin-right:20px;
margin-top:-10px;
}

برا اینکه بقیه عکس ها بید بالا از -10 استفاده کردم، یعنی عدد منفی :(