এইচটিএমএল পরিবর্তন না করে কীভাবে একই লাইনে দুটি উপাদান সারিবদ্ধ করবেন

Question 1

আমার একই লাইনে দুটি উপাদান রয়েছে বাম এবং ভাসমান ডানদিকে ated

<style type="text/css">
#element1 {float:left;}
#element2 {float:right;}
</style>

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

দুজনের মধ্যে প্রায় 10 পিক্সেল প্যাডিং সহ অ্যালিমেন্ট 1 এর সাথে সামঞ্জস্য হওয়ার জন্য আমার এলিমেন্ট 2 প্রয়োজন। সমস্যাটি হ'ল উপাদান 2 এবং প্রস্থের উপর নির্ভর করে উপাদানটির প্রস্থ পরিবর্তন করতে পারে (ফন্টের আকার, ইত্যাদি) সুতরাং এটি সর্বদা এলিমেন্ট 1 এর সাথে পুরোপুরিভাবে রেখাযুক্ত থাকে না (আমি কেবল মার্জিন-ডান প্রয়োগ করতে পারি না এবং এটিকে সরাতে পারি না)।

আমিও মার্কআপ পরিবর্তন করতে পারি না।

তাদের লাইন করার জন্য কি অভিন্ন উপায় আছে? আমি শতাংশের সাথে মার্জিন-রাইট চেষ্টা করেছি, এলিমেন্ট 2 আরও কাছে আনার জন্য আমি এলিমেন্ট 1-তে নেতিবাচক মার্জিন চেষ্টা করেছি (তবে এটি কাজ করতে পারিনি)।

Question 2

ব্যবহার display:inline-block

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;}

উদাহরণ

Question 3

<style>
div {
    display: flex;
    justify-content: space-between;  
}
</style>

<div>
    <p>Item one</p>
    <a>Item two</a>
</div>

Question 4

#element1 {float:left;}
#element2 {padding-left : 20px; float:left;}

ফ্রিল্ড: http://jsfiddle.net/sKqZJ/

বা

#element1 {float:left;}
#element2 {margin-left : 20px;float:left;}

মিতাল: http://jsfiddle.net/sKqZJ/1/

বা

#element1 {padding-right : 20px; float:left;}
#element2 {float:left;}

মিতাল: http://jsfiddle.net/sKqZJ/2/

বা

#element1 {margin-right : 20px; float:left;}
#element2 {float:left;}

মিতাল: http://jsfiddle.net/sKqZJ/3/

উল্লেখ: সিএসএস মার্জিন এবং প্যাডিংয়ের মধ্যে পার্থক্য

Question 5

প্রদর্শন ব্যবহার করে : ইনলাইন-ব্লক; এবং আরও সাধারণভাবে যখন আপনার পিতামাতা থাকে (সর্বদা এইচটিএমএল ব্যতীত কোনও পিতামাতা থাকে) display: inline-block;অভ্যন্তরীণ উপাদানগুলির জন্য ব্যবহার করুন । এবং উইন্ডো সঙ্কুচিত হয়ে গেলে (সঙ্কুচিত) হয়ে গেলেও তাদের একই লাইনে থাকতে বাধ্য করা। পিতামাতার জন্য দুটি সম্পত্তি যুক্ত করুন:

    white-space: nowrap;
    overflow-x: auto;

এটি পরিষ্কার করার জন্য এখানে আরও ফর্ম্যাট করা উদাহরণ:

.parent {
    white-space: nowrap;
    overflow-x: auto;
}

.children {
   display: inline-block;
   margin-left: 20px; 
}

উদাহরণস্বরূপ, উদাহরণস্বরূপ, আপনি উপরেরটিকে সহকর্মী হিসাবে প্রয়োগ করতে পারেন (আমি মনে করি যে পিতামাতারা দেহ।

body { /*body may pose problem depend on you context, there is no better then have a specific parent*/
        white-space: nowrap;
        overflow-x: auto;
 }

#element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/
   display: inline-block;
   margin-left: 10px; 
}

মনে রাখবেন white-space: nowrap;এবং overlow-x: auto;এগুলি আপনাকে এক লাইনে থাকতে বাধ্য করতে হবে। সাদা-স্থান: এখনই; মোড়ানো অক্ষম করুন। এবং ওভারলো-এক্স: অটো; স্ক্রোলিং সক্রিয় করতে, যখন উপাদান ফ্রেম সীমা ছাড়িয়ে যায়।

Question 6

যে ক্ষেত্রে আমি এর মতো ভাসমান উপাদানগুলি ব্যবহার করি, আমার সাধারণত নিশ্চিত হওয়া দরকার যে উভয় ভাসমান উপাদানগুলির প্রশস্ততা এবং তার অভ্যন্তরের সমস্ত ফিট করার জন্য ধারক উপাদানটি সর্বদা যথেষ্ট যথেষ্ট হবে। এটি করার সহজতম উপায় হ'ল বাহ্যিক উপাদানগুলির স্থির প্রস্থগুলি উভয়ই দেওয়া যেমন বাহ্যিক উপাদানগুলির ভিতরে সঠিকভাবে ফিট হবে:

#container {width: 960px;}
#element1  {float:left; width:745px; margin-right:15px;}
#element2  {float:right; width:200px;}

যদি আপনি এটি করতে না পারেন কারণ এটি একটি স্কেলিং প্রস্থের লেআউট, তবে অন্য বিকল্পটি প্রতিটি মাত্রার সেট শতাংশের মতো হওয়া উচিত:

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:20%;}

আপনার কাছে এই জাতীয় কিছু দরকার হয় এটি জটিল হয়ে ওঠে:

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:200px;}

এর মতো ক্ষেত্রে, আমি দেখতে পাই যে কখনও কখনও সর্বোত্তম বিকল্পটি হ'ল ফ্লোট ব্যবহার না করা এবং এর মতো একই প্রভাব পেতে আপেক্ষিক / পরম অবস্থান ব্যবহার করা:

#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */
#element1 {margin-right:215px;}
#element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;}

যদিও এটি কোনও ভাসমান সমাধান নয়, এর ফলশ্রুতিতে পাশাপাশি কলামগুলি একই উচ্চতা যেখানে ফলিত হয় এবং অন্যটির স্থির প্রস্থ থাকে এবং একটির সাথে তরল থাকতে পারে।

Question 7

নীচে হিসাবে আপনার সিএসএস পরিবর্তন করুন

#element1 {float:left;margin-right:10px;} 
#element2 {float:left;}

এখানে জেএসফিডেল http://jsfiddle.net/a4aME/

Question 8

আপনার মত একই ধরণের ব্যবহারের ক্ষেত্রে এটি আমি ব্যবহার করেছি।

<style type="text/css">
#element1 {display:inline-block; width:45%; padding:10px}
#element2 {display:inline-block; width:45%; padding:10px}
</style>

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

আপনার প্রয়োজন অনুসারে আপনার প্রস্থ এবং প্যাডিং সামঞ্জস্য করুন। দ্রষ্টব্য - 'প্যাডিং' যুক্ত করতে পুরোপুরি 'প্রস্থ' 100% এর বেশি (এলি_উইউথ + ইলে 2_ প্রস্থ) অতিক্রম করবেন না, এটি 100% এর চেয়ে কম রাখুন।