چیدمان عکس و متن در کنار هم چهارشنبه, 08 آذر 13960نظر

گاهی اوقات بعنوان مدیر محتوای وب سایت میخواهید که در صفحه یک تصویر  را در کنار نوشته ها قرار دهید مانند 

شرکت آرادین پرداز هزاره سوم ، از سال 1390 با همکاری چند تن از نیروهای جوان ، خلاق و با انگیزه در زمینه طراحی وب سایت ، تولید سیستم های خاص منظوره تحت وب و دسکتاپ فعالیت خود را آغاز نموده است . موسسین این مجموعه را بعد از گذشت یکسال ، در سال 1391 تحت عنوان شرکت آرادین پرداز هزاره سوم به ثبت رساندند.  

برای انجام اینکار کافی است از 2 تگ <div> و خاصه float در استایل استفاده نمایید . به کد زیر توجه نمایید :

<html>
<head>
<style>
#main {
    width:100%;
 background-color: #f9f9f9f0;
    display: table;
padding: 20px;
    font-style: italic;
}
</style>
</head>
<body>
<div id="main">
 <div dir="rtl" style="text-align: justify;float :right ;width:70%;">شرکت آرادین پرداز هزاره سوم ، از سال 1390 با همکاری چند تن از نیروهای جوان ، خلاق و با انگیزه در زمینه طراحی وب سایت ، تولید سیستم های خاص منظوره تحت وب و دسکتاپ فعالیت خود را آغاز نموده است . موسسین این مجموعه را بعد از گذشت یکسال ، در سال 1391 تحت عنوان شرکت آرادین پرداز هزاره سوم به ثبت رساندند.;</div>
 <div style="float:left ;padding-right:20px ;width:30%"><img src="http://www.araadin.com/uploads/logofull.png" style="width:200px" /></div>
</div>
</body>
</html>

دقت نمایید در این مثال تک <div> ی که متن قرار دارد دارای استایل float:right  و تک <div> عکس دارای استایل float:left  است و البته مقدار دهی خاصه width (عرض) میتواند به چیدمان بهتر کمک نمایید البته در صورت اینکه قالب respansive نداشته باشیم چون در آن حالت باید مقدار  width ها را مدیریت نمایید .



نظرات

نظر خود را اضافه کنید