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

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

شرکت آرادین پرداز هزاره سوم ، از سال 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 ها را مدیریت نمایید .



نظرهای شما

دوست عزیز ، نظر خودت را برایمان ارسال کن