এই স্প্যানটি ডিভের ডানদিকে কীভাবে সারিবদ্ধ করবেন?

151

আমি নিম্নলিখিত এইচটিএমএল আছে:

<div class="title">
    <span>Cumulative performance</span>
    <span>20/02/2011</span>
</div>

এই সিএসএস সহ:

.title
{
    display: block;
    border-top: 4px solid #a7a59b;
    background-color: #f6e9d9;
    height: 22px;
    line-height: 22px;
    padding: 4px 6px;
    font-size: 14px;
    color: #000;
    margin-bottom: 13px;
    clear:both;
}

যদি আপনি এই জেএসফিডেলটি পরীক্ষা করেন: http://jsfiddle.net/8JWZ/

আপনি দেখতে পাচ্ছেন যে নাম এবং তারিখ এক সাথে আটকে আছে। ডানদিকে সারিবদ্ধ করার জন্য আমি কীভাবে কোনও উপায় পেতে পারি? আমি float: right;দ্বিতীয়বার চেষ্টা করেছি তবে এটি স্টাইলকে স্ক্রু করে দেয় এবং ঘেরের ডিভের বাইরে তারিখটি ঠেলে দেয়

html css

— DaveDev
সূত্র

2

আপনি কি এইচটিএমএল সংশোধন করতে পারবেন?

— ফ্রোগজ

3

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

— জোশ কোবাচ

246

আপনি যদি এইচটিএমএল সংশোধন করতে পারেন: http://jsfiddle.net/8JWZ/3/

<div class="title">
  <span class="name">Cumulative performance</span>
  <span class="date">20/02/2011</span>
</div>

.title .date { float:right }
.title .name { float:left }

— Phrogz
সূত্র

সিএসএস সরলীকৃত এবং সঠিক পরিষ্কার: উভয় যুক্ত করা উচিত। এছাড়াও ফিডলে

— রিসর্ড

9

অথবা যদি আপনি এটা ইনলাইন চান (I did)

— মার্ক

51

ফ্লোট নিয়ে কাজ করা কিছুটা অগোছালো:

এটি অন্যান্য অনেক 'তুচ্ছ' লেআউট ট্রিক্স ফ্লেক্সবক্সের সাহায্যে করা যেতে পারে।

   div.container {
     display: flex;
     justify-content: space-between;
   }

২০১৩ সালে আমি মনে করি এটি উত্তম সমাধান (সবচেয়ে বেশি ভাসমান) আপনার যদি লিগ্যাসি ব্রাউজারগুলি সমর্থন না করতে হয়: https://caniuse.com/#feat=flexbox

বিভিন্ন ফ্লোটের ব্যবহারগুলি কীভাবে ফ্লেক্সবক্সের সাথে তুলনা করে (কীভাবে কিছু প্রতিদ্বন্দ্বী উত্তর অন্তর্ভুক্ত থাকতে পারে)) ফিডল পরীক্ষা করুন: https://jsfiddle.net/b244s19k/25/ । আপনার যদি এখনও ভাসা দিয়ে আটকাতে হয় তবে আমি অবশ্যই তৃতীয় সংস্করণটির প্রস্তাব দিয়েছি।

— Risord
সূত্র

এটিই আমি ব্যবহার করতে পছন্দ করেছি, সেট করতেও মাথায় রাখুন float: left;এবং float: right;স্প্যানগুলিতে আপনি যে উপাদানগুলিতে স্থান দিতে চান সেগুলি রয়েছে।

— রান লটটম

1

এই উত্তরের মূল বার্তাটি হ'ল "ভাসাটি ক্ষতিকারক হিসাবে বিবেচিত হয়" এবং আপনার কখনই সেগুলি ব্যবহার করা উচিত নয় (ঠিক আছে কিছু বিরল ব্যতিক্রম আছে তা অবশ্যই)। সুতরাং আপনি কেন এটি একটি ভাল ধারণা বলে স্পষ্ট করতে পারেন?

— রিসর্ড

1

আমি ভেবেছিলাম floatঅভ্যন্তরীণ উপাদানগুলির জন্য প্রয়োজনীয় ছিল কারণ আমি ভেবেছিলাম এটি তাদের জন্য ঝাঁঝরি উদাহরণে সংজ্ঞায়িত করা হয়েছে তবে #testDএটি সংজ্ঞায়িত নয়। আমার খারাপ!

— লোটোমে রান

25

ভাসমান বিকল্প বিকল্প হ'ল পরম অবস্থান ব্যবহার:

.title {
  position: relative;
}

.title span:last-child {
  position: absolute;
  right: 6px;   /* must be equal to parent's right padding */
}

আরও দেখুন বেহালার ।

— ফিলিপ
সূত্র

5

আপনি এইচটিএমএল সংশোধন না করে এটি করতে পারেন। http://jsfiddle.net/8JwhZ/1085/

<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>

.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }

— Kerel
সূত্র

4

সমাধান ছাড়াই ফ্লেক্সবক্স ব্যবহার করে justify-content: space-between।

<div class="title">
  <span>Cumulative performance</span>
  <span>20/02/2011</span>
</div>

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

আমরা যখন flex:1প্রথমটি ব্যবহার করি তখন এটি পুরো অবশিষ্ট স্থান নেয় এবং দ্বিতীয়টিকে ডানে সরিয়ে দেয় । এই সমাধান সহ ফিডাল: https://jsfiddle.net/2k1vryn7/

এখানে https://jsfiddle.net/7wvx2uLp/3/ সঙ্গে flexbox: আপনি দুই flexbox মধ্যে পার্থক্য পন্থা দেখতে পারেন justify-content: space-betweenএবং flexbox flex:1প্রথম ।

— hydro17
সূত্র