একই লাইনে বাম এবং ডানদিকে দুটি ইনলাইন-ব্লক সারিবদ্ধ করুন

Question

আমি দুটি ইনলাইন-ব্লকগুলি কীভাবে বিন্যস্ত করতে পারি যাতে একটি বাম এবং অন্যটি একই লাইনে ডান হয়? এটা এত কঠিন কেন? ল্যাটেক্সের \ hfill এর মতো কিছু আছে যা এই অর্জনের জন্য তাদের মধ্যে স্থানটি গ্রাস করতে পারে?

আমি ফ্লোটগুলি ব্যবহার করতে চাই না কারণ ইনলাইন-ব্লকগুলি সহ আমি বেসলাইনগুলি সীমাবদ্ধ করতে পারি। এবং যখন উইন্ডোটি তাদের উভয়ের জন্য খুব ছোট হয়ে যায়, ইনলাইন-ব্লকগুলি সহ আমি কেবল পাঠ্য-প্রান্তিককরণকে কেন্দ্র করে পরিবর্তন করতে পারি এবং সেগুলি একে অপরের একেবারে কেন্দ্রিক হবে। আপেক্ষিক (পিতা-মাতা) + নিরঙ্কুশ (উপাদান) অবস্থানের একই সমস্যা রয়েছে যেমন ভাসমান।

এইচটিএমএল 5:

<header>
    <h1>Title</h1>
    <nav>
        <a>A Link</a>
        <a>Another Link</a>
        <a>A Third Link</a>
    </nav>
</header>

সিএসএস:

header {
    //text-align: center; // will set in js when the nav overflows (i think)
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

nav {
    display: inline-block;
    vertical-align: baseline;
}

থেরি একে অপরের ঠিক পাশে, তবে আমি navডানদিকে চাই।

Comments

এটি সমাধানের একমাত্র উপায় আফাইক হ'ল ফ্লোটস বা পরম অবস্থান নির্ধারণ। আপনি নেভের মার্জিন-টপ ব্যবহার করে একই বেসলাইন অবস্থান অর্জন করতে পারেন।

— পাওয়ারবাই

কেবল মার্জিন-টপ এবং ফ্লোট ব্যবহার করুন। এটি বা নিখুঁত অবস্থান ছাড়াই এটি করা সম্ভব নয়।

— jdhartley

ভিউপোর্টের আকারের উপর নির্ভর করে CSS পরিবর্তন করতে CSS মিডিয়া ক্যোয়ারী ব্যবহার করুন। আপনি উভয় position: absoluteএবংinline-block

— এলক্লানারগুলি

Answer 1

সম্পাদনা করুন: 3 বছর পেরিয়ে গেছে যখন আমি এই প্রশ্নের উত্তর দিয়েছি এবং আমি অনুমান করি যে আরও আধুনিক সমাধানের প্রয়োজন, যদিও বর্তমানটি এটি করে :)

1. ফ্লেক্সবক্স

এটি এখন পর্যন্ত সংক্ষিপ্ততম এবং সবচেয়ে নমনীয়। display: flex;অভিভাবক পাত্রে প্রয়োগ করুন এবং এটির justify-content: space-between;মতো করে তার সন্তানদের স্থান ঠিক করুন:

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

এখানে অনলাইনে দেখা যায় - http://jsfiddle.net/skip405/NfeVh/1073/

তবে নোট করুন যে ফ্লেক্সবক্স সমর্থন আইই 10 এবং আরও নতুন। আপনার যদি 9 বা ততোধিক বা তার বেশি বয়সীদের সমর্থন করতে হয় তবে নিম্নলিখিত সমাধানটি ব্যবহার করুন:

আপনি text-align: justifyএখানে কৌশল ব্যবহার করতে পারেন ।

.header {
    background: #ccc; 
    text-align: justify; 

    /* ie 7*/  
    *width: 100%;  
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
 .header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em; 

    /* ie 7*/ 
    *display: inline;
    *zoom: 1;
    *text-align: left; 
}

.nav {
    display: inline-block;
    vertical-align: baseline; 

    /* ie 7*/
    *display: inline;
    *zoom:1;
    *text-align: right;
}

কাজের উদাহরণটি এখানে দেখা যাবে: http://jsfiddle.net/skip405/NfeVh/4/ । এই কোডটি আইআই 7 এবং এর থেকে উপরে কাজ করে

যদি এইচটিএমএলের ইনলাইন-ব্লক উপাদানগুলি স্থানের সাথে পৃথক না করা হয় তবে এই সমাধানটি কার্যকর হবে না - উদাহরণটি দেখুন http://jsfiddle.net/NfeVh/1408/ । আপনি জাভাস্ক্রিপ্ট সহ সামগ্রী সন্নিবেশ করানোর ক্ষেত্রে এটি হতে পারে।

আমরা যদি আই 7 এর বিষয়ে চিন্তা না করি তবে কেবল তারা-হ্যাক বৈশিষ্ট্য বাদ দিতে পারি it আপনার মার্কআপ ব্যবহার করে কাজের উদাহরণটি এখানে - http://jsfiddle.net/skip405/NfeVh/5/ । আমি কেবল header:afterঅংশটি যুক্ত করেছি এবং সামগ্রীটিকে ন্যায়সঙ্গত করেছি।

afterসিউডো-এলিমেন্টের সাথে isোকানো অতিরিক্ত স্থানটির সমস্যা সমাধানের font-sizeজন্য, কেউ মূল উপাদানগুলির জন্য 0 সেট করে সেট করে আবার শিশু উপাদানগুলির জন্য 14px বলতে পুনরায় সেট করার কৌশল করতে পারেন trick এই কৌশলটির কার্যকারী উদাহরণটি এখানে দেখা যাবে: http://jsfiddle.net/skip405/NfeVh/326/

Comments

ব্যানারটি লম্বা করা থেকে বাধা দেওয়ার কোনও উপায় আছে কি? আমি বুঝতে পারি যে এটি কীভাবে কাজ করছে, তাই আমি ধরে নেব যে এটি নেই।

— এম কে 12

আপনি যদি জাভাস্ক্রিপ্ট দিয়ে আপনার সামগ্রী তৈরি করছেন তবে মনে রাখবেন যে উপাদানগুলির মধ্যে শ্বেত স্পেস থাকলেই এই সমাধানটি কাজ করে। আপনাকে বাম / ডান উপাদানগুলির মধ্যে একটি পাঠ্য নোড toোকাতে হবে বা তারা উভয় বামে আটকে থাকবে।

— স্টিফেন নেলসন

আপনার কোডটিও এখানে পেস্ট করতে আপত্তি করবেন? বাহ্যিক জায়গাগুলির লিঙ্কগুলির কোনও এক সময় মারা যাওয়ার অভ্যাস রয়েছে এবং যদি এটি ঘটে থাকে তবে অন্যথায় দরকারী উত্তরটি হঠাৎ অকেজো হয়ে যাবে।

— বা ম্যাপার

@ ভ্যালারিও কল্ট্র- আমি সম্মত হই যে শূন্য স্থানটি এই পদ্ধতির সম্পর্কে সবচেয়ে বিরক্তিকর জিনিস and সুস্পষ্টভাবে আপনার পরিচালনা font-sizeবরং অনাকাঙ্ক্ষিত। আমি একটি ভিন্ন সমাধান প্রস্তাব। .header:afterনোটকারীটি সমান উচ্চতার এক লাইন যুক্ত করে নোট করুন font-size। ভাগ্যক্রমে আমরা জানি যে কত। এটা ঠিক 1em! সুতরাং, উদ্ধার নেতিবাচক মার্জিন ! এই ঝাঁকুনি কিভাবে দেখায় ।

— ডোমি

@ skip405 দ্রষ্টব্য: মোড়কের এলিমেন্টে (শিরোলেখের উপর) লাইনটির উচ্চতা 0 স্থাপন করা এবং এর সিউডো এলেমটির উল্লম্ব-প্রান্তিককরণ ঠিক করা (উল্লম্ব-সারিবদ্ধ: শীর্ষ, বলুন) অতিরিক্ত স্থানের সমস্যাটি ঠিক করতে পারে। আমাদের অবশ্যই অবশ্যই মূল উপাদানগুলির উপরে লাইন-উচ্চতাটি পুনরায় সেট করতে হবে তবে এটি অনেক ক্ষেত্রে সহজ হতে পারে। jsfiddle.net/bencergazda/3gL8153n/7

— beendergazda

Answer 2

@ Skip405 এর উত্তরের সুযোগ নিয়ে আমি এর জন্য একটি সাস মিক্সিন তৈরি করেছি:

@mixin inline-block-lr($container,$left,$right){
    #{$container}{        
        text-align: justify; 

        &:after{
            content: '';
            display: inline-block;
            width: 100%;
            height: 0;
            font-size:0;
            line-height:0;
        }
    }

    #{$left} {
        display: inline-block;
        vertical-align: middle; 
    }

    #{$right} {
        display: inline-block;
        vertical-align: middle; 
    }
}

এটি 3 টি পরামিতি গ্রহণ করে। ধারক, বাম এবং ডান উপাদান। উদাহরণস্বরূপ, প্রশ্নের সাথে মানিয়ে নিতে আপনি এটি এটি ব্যবহার করতে পারেন:

@include inline-block-lr('header', 'h1', 'nav');

Answer 3

আপনি যদি ফ্লোট ব্যবহার করতে না চান তবে আপনাকে আপনার এনএভিটি মুড়িয়ে রাখতে হবে:

<header>
<h1>Title</h1>
<div id="navWrap">
<nav>
    <a>A Link</a>
    <a>Another Link</a>
    <a>A Third Link</a>
</nav>
</div>
</header>

... এবং আরও কিছু নির্দিষ্ট সিএসএস যুক্ত করুন:

header {
//text-align: center; // will set in js when the nav overflows (i think)
width:960px;/*Change as needed*/
height:75px;/*Change as needed*/
}

h1 {
display: inline-block;
margin-top: 0.321em;
}

#navWrap{
position:absolute;
top:50px; /*Change as needed*/
right:0;
}

nav {
display: inline-block;
vertical-align: baseline;
}

আপনার আরও কিছু করা দরকার হতে পারে তবে এটি শুরু।

Answer 4

আপনি যদি ইতিমধ্যে জাভাস্ক্রিপ্টটি স্টাফ কেন্দ্রের জন্য ব্যবহার করে থাকেন যখন পর্দাটি খুব ছোট থাকে (আপনার শিরোনামের জন্য আপনার মন্তব্য অনুসারে) তবে জাভাস্ক্রিপ্টের সাথে কেন কেবল ভাসমান / মার্জিনগুলি পূর্বাবস্থায় ফেরা করবেন না এবং সাধারণত ভাসমান এবং মার্জিন ব্যবহার করবেন না।

এমনকি আপনি যে পরিমাণ জাভাস্ক্রিপ্ট ব্যবহার করছেন তা হ্রাস করতে আপনি CSS মিডিয়া ক্যোয়ারীও ব্যবহার করতে পারেন।

Comments

আমি অনুমান করি যে আমি এখনও এটি সম্পর্কে সত্যই চিন্তা করছিলাম না, মনে হয়েছিল কেবল এভাবেই সহজ হবে। তবে দৃশ্যত তা নয়। আমি জাভাস্ক্রিপ্ট থেকে পরবর্তী লাইনে ঝাঁপিয়ে পড়া এনএভি তে ঝাঁকুনি করব সে সম্পর্কে কোনও ইঙ্গিত?

— এম কে 12

আহ, আমি এর জন্য মিডিয়া প্রশ্নগুলি ব্যবহার করতে পারি! আমি ভেবেছিলাম সেগুলি কেবল পুনরায় আকারে নয়, স্টার্টআপে ব্যবহৃত হয়েছিল। ধন্যবাদ।

— এম কে 12

Answer 5

আমি মনে করি এটির একটি সম্ভাব্য সমাধান হ'ল ব্যবহার করা display: table:

.header {
  display: table;
  width: 100%;
  box-sizing: border-box;
}

.header > * {
  display: table-cell;
}

.header > *:last-child {
  text-align: right;  
}

h1 {
  font-size: 32px;
}

nav {
  vertical-align: baseline;
}

জেএসফিডাল: http://jsfiddle.net/yxxrnn7j/1/

Answer 6

আইটেমগুলি সারিবদ্ধ করার নতুন উপায়:

গ্রিড :

.header {
        display:grid;
        grid-template-columns: 1fr auto;
    }

ডেমো

বুটস্ট্র্যাপ 4. ডান সারিবদ্ধ :

<div class="row">
      <div class="col">left</div>
      <div class="col">
          <div class="float-right">element needs to be right aligned</div>
      </div>
</div>

ডেমো

Answer 7

সেখানে মা-বাবার বামদিকে এবং ডানদিকে প্রদর্শিত হচ্ছে। আপনার যদি আরও 3 টি উপাদান থাকে তবে তাদের জন্য নবম শিশু () ব্যবহার করুন।

এইচটিএমএল নমুনা:

<body>
    <ul class="nav-tabs">
        <li><a  id="btn-tab-business" class="btn-tab nav-tab-selected"  onclick="openTab('business','btn-tab-business')"><i class="fas fa-th"></i>Business</a></li>
        <li><a  id="btn-tab-expertise" class="btn-tab" onclick="openTab('expertise', 'btn-tab-expertise')"><i class="fas fa-th"></i>Expertise</a></li>
        <li><a  id="btn-tab-quality" class="btn-tab" onclick="openTab('quality', 'btn-tab-quality')"><i class="fas fa-th"></i>Quality</a></li>
    </ul>
</body>

সিএসএস নমুনা:

.nav-tabs{
  position: relative;
  padding-bottom: 50px;
}

.nav-tabs li {
  display: inline-block;  
  position: absolute;
  list-style: none;
}
.nav-tabs li:first-child{
  top: 0px;
  left: 0px;
}
.nav-tabs li:last-child{
  top: 0px;
  right: 0px;
}
.nav-tabs li:nth-child(2){
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
}

Answer 8

এটিকে ভাসা করুন: ডান এবং এইচ 1 ভাসা: বাম এবং একটি উপাদান পরিষ্কার সহ রেখে দিন: উভয় পরে।

Comments

" আমি ফ্লোটগুলি ব্যবহার করতে চাই না "

— পাওয়ারবাই

@ পাওয়ারবুয় মজার কথা বলেছেন তিনি সমাধানটি শেষ পর্যন্ত ভাসা দিয়ে নির্বাচন করেছেন, তাই না?

— Itay Moav -Malimovka

@ ইটালি: কেবলমাত্র আমি মনে করি এটিই একমাত্র সম্ভাব্য উপায় — আমি আমার গ্রহণযোগ্য উত্তর পরিবর্তন করেছি।

— এম কে 12

Answer 9

উভয় উপাদান ব্যবহার করুন

display: inline-block;

'নাভ' উপাদান ব্যবহারের জন্য

float: right;

Comments

একটি ভাসা জন্য কোন মোড়ানো ব্যবহার করা যাবে না।

— আইভজেন নায়দা