چیدمان عکس و متن در کنار هم

مدیر داده ها 1396/09/08 687

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

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

آخرین آموزشها

  • چیدمان عکس و متن در کنار هم

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

    ساخت منو برای کاربران مبتدی ممکن است کمی مشکل باشد . با توجه به این موضوع میخواهم یک منو ساده به صورت افقی برای شما طراحی کنم تا به صورت دقیق نحوه و چیدمان منو را یاد بگیرید

    بخوانید
  • قرار دادن چند div در کنار هم

    چیدمان افقی چند div در HTML با روشهای مختلفی صورت میگیرد از جمله استفاده از خاصیت Flex در استایل (style) تگ parent است .

    بخوانید

طراحی وب

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

  • تماس با شرکت آرادین پرداز 88985292(021)
  • تماس با شرکت آرادین پرداز info@araadin.com