আমার একমাত্র সমস্যা হ'ল এগুলি তিনটি জুড়ে রেখাযুক্ত করা এবং সমান ব্যবধান রয়েছে। স্পষ্টতই, স্প্যানগুলির প্রস্থ এবং ডিভ থাকতে পারে না (এবং প্রদর্শন সহ স্প্যান: ব্লক) একে অপরের পাশে অনুভূমিকভাবে প্রদর্শিত হবে না। পরামর্শ?
<div style='width:30%; text-align:center; float:left; clear:both;'> আমি এখন কি আছে।
উত্তর:
আপনি float: left;গুণাবলীর সাথে ডিভ ব্যবহার করতে পারেন যা তাদের একে অপরের পাশে অনুভূমিকভাবে হাজির করে তুলবে, তবে তারপরে ওভারল্যাপ না হয় তা নিশ্চিত করার জন্য আপনাকে নিম্নলিখিত উপাদানগুলিতে ক্লিয়ারিং ব্যবহার করতে হবে।
overflow: hidden। দেখুন: stackoverflow.com/questions/323599/...
padding-leftডান দিকে ডিভ করার চেষ্টা করি তবে তা উপেক্ষা করা যায়।
<div style="display: in-line"></div><div style="display: in-line"></div>ভাল কাজ করা উচিত।
overflow: hiddenসবচেয়ে ভাল সমাধান।
তুমি ব্যবহার করতে পার
.floatybox {
display: inline-block;
width: 123px;
}
আপনার যদি কেবল সেই ব্রাউজারগুলিকে সমর্থন করতে চান যা ইনলাইন ব্লকগুলির জন্য সমর্থন করে। ইনলাইন ব্লকগুলির প্রস্থ থাকতে পারে তবে বোতামের উপাদানগুলির মতো ইনলাইন।
ওহ, এবং আপনি উল্লম্ব-সারিবদ্ধ যুক্ত করতে চান: জিনিসগুলি লাইন করা যায় তা নিশ্চিত করার জন্য উপাদানগুলির উপরে শীর্ষ
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
প্রযুক্তিগতভাবে, একটি স্প্যান একটি ইনলাইন উপাদান, তবে এটির প্রস্থ থাকতে পারে, আপনাকে প্রথমে তাদের প্রদর্শন সম্পত্তিটি ব্লক করার জন্য প্রয়োজন। যাইহোক, এই প্রসঙ্গে, একটি ডিভ সম্ভবত সম্ভবত আরও উপযুক্ত, কারণ আমি অনুমান করছি যে আপনি এই ডিভগুলি সামগ্রীতে পূরণ করতে চান।
একটি জিনিস যা আপনি অবশ্যই করতে চান না তা clear:bothডিভগুলি সেট করে। এটি সেট করে দেওয়ার অর্থ হ'ল ব্রাউজারটি কোনও উপাদানকে তাদের মতো একই লাইনে বসতে দেয় না। ফলস্বরূপ, আপনার উপাদানগুলি স্ট্যাক আপ হবে।
নোট, এর ব্যবহার display:inline। এটি ie6 মার্জিন-দ্বিগুণ বাগের সাথে কাজ করে। আপনি প্রয়োজনে এটি অন্যান্য উপায়ে মোকাবেলা করতে পারেন, উদাহরণস্বরূপ শর্তাধীন স্টাইলশিট ets
আমি একটি মোড়ক যুক্ত করেছি (# যাই হোক না কেন) কারণ আমি অনুমান করছি যে এটি পৃষ্ঠায় কেবলমাত্র উপাদানই হবে না, তাই আপনাকে অবশ্যই অন্যান্য পৃষ্ঠার উপাদানগুলি থেকে আলাদা করতে হবে।
যাইহোক, আমি আশা করি এটি সহায়ক।
আপনি করতে পারেন:
<div style="float: left;"></div>
বা
<div style="display: inline;"></div>
হয় যে কোনও একটি ডিভগুলি আনুভূমিকভাবে টাইল করে দেবে।
আমি এটি এর মতো কিছু করব কারণ এটি আপনাকে 3 টি এমনকি আকারের কলাম দেয়, এমনকি ফাঁকা স্থান এবং (এমনকি) স্কেল দেয়। দ্রষ্টব্য: এটি পরীক্ষা করা হয় নি তাই এটির জন্য পুরানো ব্রাউজারগুলির জন্য টুইট করার প্রয়োজন হতে পারে।
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
আমি ব্যবহার করব:
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
আমি প্রথমবার 'ওভারফ্লো' থেকে এই 'কোড সরঞ্জাম' ব্যবহার করছি ... তবে এখনই এটি করা উচিত ...
আপনি যা করতে পছন্দ করতে পারেন তা হ'ল সিএসএস গ্রিড ভিত্তিক লেআউটগুলি সন্ধান করা। এই বিন্যাস পদ্ধতিতে গ্রিড কাঠামোতে পৃষ্ঠাগুলি প্রান্তিককরণের জন্য কয়েকটি সিএসএস ক্লাস নির্দিষ্ট করা জড়িত। এটি ওয়েব-ভিত্তিকের চেয়ে প্রিন্ট-বেইসড লেআউটের সাথে আরও ঘনিষ্ঠভাবে সম্পর্কিত তবে এটি টেবিলের অবলম্বন না করেই অনেকগুলি ওয়েবসাইটে সামগ্রীর বিন্যাসে বিন্যাস করার জন্য ব্যবহৃত একটি কৌশল।
স্মাগিং ম্যাগাজিন থেকে শুরু করার জন্য এটি ব্যবহার করে দেখুন ।
সিএসএস ফ্লোট সম্পত্তি দেখুন। http://w3schools.com/css/pr_class_float.asp
এটি ডিভের মতো ব্লক উপাদানগুলির সাথে কাজ করে। বিকল্পভাবে, আপনি কী প্রদর্শনের চেষ্টা করছেন, আপনি যদি কিছু তথ্যের টেবিলটি দেখানোর চেষ্টা করছেন তবে সারণীগুলি মন্দ নয়।
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
অন্য ... ব্যবহার করার চেষ্টা করুন float: left;বা right;, widthঅন্যান্য মানগুলির জন্য এটি পরিবর্তন করুন ... এটি কাজ করবে ... আরও মনে রাখবেন যে 10% যা ডিআইভি দ্বারা ব্যবহৃত হয় না সেগুলি তাদের খারাপ হয়ে গেছে ... খারাপ ইংরেজির জন্য দুঃখিত :)