আমি কেবল সিএসএস ব্যবহার করে কীভাবে আমার ডিভগুলি পুনরায় অর্ডার করতে পারি?

Question

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

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

আশা করা যায় এটি প্রত্যাশিত যে পছন্দসই ফলাফল:

Content to be above in this situation
Content to be below in this situation
Other elements

যখন মাত্রাগুলি স্থির করা হয় তখন যেখানে প্রয়োজন সেখানে এগুলিকে অবস্থান করা সহজ, তবে সামগ্রী কখন পরিবর্তনশীল হবে সে জন্য আমার কিছু ধারণা প্রয়োজন। এই দৃশ্যের স্বার্থে, দয়া করে উভয়টির প্রস্থটি 100% হিসাবে বিবেচনা করুন।

আমি বিশেষত একটি সিএসএস-কেবল সমাধানের সন্ধান করছি (এবং যদি এটি সমাধান না করে তবে সম্ভবত এটি অন্যান্য সমাধানগুলির সাথে মিলিত হতে হবে)।

এটি অনুসরণ করে অন্যান্য উপাদান রয়েছে। আমি যে সীমাবদ্ধ দৃশ্যাবলীটি দেখিয়েছি তাতে একটি ভাল পরামর্শ উল্লেখ করা হয়েছিল - এটি সর্বোত্তম উত্তর হতে পারে তবে এটি অনুসরণ করার উপাদানগুলিতে প্রভাবিত না হয় তাও আমি নিশ্চিত করে দেখছি।

Answer 1

এই সমাধানটি কেবল সিএসএস ব্যবহার করে এবং ভেরিয়েবল সামগ্রী সহ কাজ করে

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

Comments

নিস! আইই 8 বা এর চেয়ে কমের জন্য কাজ করে না তবে আপনি এই ব্রাউজারগুলির জন্য শর্তসাপেক্ষ স্ক্রিপ্ট ব্যবহার করতে পারেন ...

— স্টুয়ার্ট ওয়েকফিল্ড

এটি সত্য যে আই 7 এর জন্য কাজ করে না, তবে আইই 8 নিয়ে আমার কোনও সমস্যা নেই

— জর্ডি

হ্যাঁ মোবাইল কনটেন্ট পুনঃক্রমের জন্য এটি খুব দুর্দান্ত, এবং IE উদ্বেগটি উইন্ডোটির বাইরে! মেনুগুলি ভাবুন যা প্রথমে সংজ্ঞায়িত হয়েছে এবং স্বাভাবিক বিন্যাসের জন্য বাম দিকে প্রদর্শিত হবে, তবে আপনি চান যে তারা সরু মোবাইল প্রদর্শনগুলিতে নীচে প্রদর্শিত হবে। এটি কৌশলটি খুব সুন্দর করে করে।

— morphles

এটি ভাসমানগুলির সাথে কাজ করে না তা লক্ষ করা উচিত। আপনি ভাসা সেট করতে হবে: কিছুই না; আপনি যদি ইতিমধ্যে একটি ভাসা সেট ছিল।

— থমাস

দ্রষ্টব্য: img { max-width: 100% }পুনঃনির্দিষ্ট উপাদানগুলির মধ্যে কাজ করবে না।

— জোনাস অ্যাপলগ্রান

Answer 2

একটি সিএসএস-কেবল সমাধান ( আইই 10 + এর জন্য কাজ করে ) - ফ্লেক্সবক্সের orderসম্পত্তি ব্যবহার করুন :

ডেমো: http://jsfiddle.net/hqya7q6o/596/

#flex { display: flex; flex-direction: column; }
#a { order: 2; }
#b { order: 1; }
#c { order: 3; }

<div id="flex">
   <div id="a">A</div>
   <div id="b">B</div>
   <div id="c">C</div>
</div>

আরও তথ্য: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Comments

অর্ডার এখানে কাজ করে। তবে বাচ্চারা 100% প্রস্থ পাচ্ছে না। পরিবর্তে, তারা একই সারিতে তাদের স্পেস ভাগ করে নিচ্ছে। এই পদ্ধতিতে প্রতিটি শিশুর জন্য 100% প্রস্থ কীভাবে ব্যবহার করা যেতে পারে তার কোনও ধারণা?

— aniskhan001

#flex { display: flex; flex-direction: column; }100% প্রস্থ সারি প্রদর্শিত হবে। jsfiddle.net/2fcj8s9e

— জাস্টিন

এটি ব্যবহার করা যেতে পারে transformএকটি বৃহত্তর ব্রাউজার suppport সঙ্গে

— পণ্য #

আইফোন 6 এস এবং এর নীচে সমর্থিত নয়

— আন্তোনাল

এই সমাধানটি আপনাকে ডিভের কোনও সংখ্যার জন্য পছন্দসই অর্ডার চয়ন করতে দেয়। এটি গ্রহণযোগ্য সমাধান আইএমও হওয়া উচিত।

— মারিওরাফ্ট

Answer 3

অন্যরা যেমন বলেছে, এটি এমন কিছু নয় যা আপনি সিএসএসে করতে চান। আপনি এটিকে নিখুঁত অবস্থান এবং অদ্ভুত মার্জিনের সাথে অভিযুক্ত করতে পারেন, তবে এটি কেবল একটি দৃ solution় সমাধান নয়। আপনার ক্ষেত্রে সেরা বিকল্পটি জাভাস্ক্রিপ্টে ফিরে যাওয়া হবে। JQuery এ, এটি একটি খুব সাধারণ কাজ:

$('#secondDiv').insertBefore('#firstDiv');

বা আরও উদারভাবে:

$('.swapMe').each(function(i, el) {
    $(el).insertBefore($(el).prev());
});

Comments

কখনও কখনও এটি সর্বোত্তম তাদের কাছে ফলদান সেরা। এই ক্ষেত্রে এটি আরও মার্জিত মনে হয় এবং আপনি বাস্তব নিয়ন্ত্রণে থাকেন। যে কারণে আমি অনুভব করি এটি আরও সুন্দর এবং ভাল।

— অবতরণ করেছে

Answer 4

এটি ফ্লেক্সবক্স ব্যবহার করে করা যেতে পারে।

একটি ধারক তৈরি করুন যা উভয় ডিসপ্লে প্রয়োগ করে : ফ্লেক্স এবং ফ্লেক্স-প্রবাহ: কলাম-বিপরীত ।

/* -- Where the Magic Happens -- */

.container {
  
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;

}


/* -- Styling Only -- */

.container > div {
  background: red;
  color: white;
  padding: 10px;
}

.container > div:last-of-type {
  background: blue;
}

<div class="container">
  
  <div class="first">

     first

  </div>
  
  <div class="second">

    second

  </div>
  
</div>

সূত্র:

• https://css-tricks.com/using-flexbox/
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow#Browser_compatibility

Answer 5

প্রাক-ফ্লেক্সবক্স ব্যবহারকারী এজেন্টদের ( বেশিরভাগ পুরানো আইই ) সমর্থন করার সময় আপনি সিএসএসের মাধ্যমে যা চান তা অর্জন করার কোনও উপায় নেই - যদি না :

1. আপনি প্রতিটি উপাদানটির যথাযথ রেন্ডারিং উচ্চতা জানেন (যদি তা হয় তবে আপনি সামগ্রীতে সামগ্রিক অবস্থান রাখতে পারেন)। আপনি যদি গতিশীল উত্পন্ন সামগ্রী নিয়ে কাজ করেন তবে আপনার ভাগ্যের বাইরে।
2. আপনি জানেন যে এই উপাদানগুলির সঠিক সংখ্যা হবে। আবার, যদি আপনাকে গতিশীলভাবে উত্পন্ন বেশ কয়েকটি অংশের জন্য এটি করতে হয় তবে আপনি ভাগ্য থেকে দূরে রয়েছেন, বিশেষত তিনটি বা তারও বেশি কিছু থাকলে।

যদি উপরেরটি সত্য হয় তবে আপনি উপাদানগুলি একেবারে অবস্থানের মাধ্যমে যা করতে চান তা করতে পারেন -

#wrapper { position: relative; }
#firstDiv { position: absolute; height: 100px; top: 110px; }
#secondDiv { position: absolute; height: 100px; top: 0; }

আবার আপনি যদি উচ্চতা কমপক্ষে # ফার্স্টডিভের জন্য চান তা জানেন না, তবে সিএসএসের মাধ্যমে আপনি যা চান তা করতে পারবেন এমন কোনও উপায় নেই। এই সামগ্রীর যে কোনও গতিশীল হলে আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।

Comments

ঠিক আছে, আমি প্রথমে এটিকে হ্রাস করেছিলাম, কিন্তু উল্টেছি। এক বিট পরিমার্জন এখনও শর্তের কারণে, যদিও: আপনার যদি পুনরায় ক্রম সংক্রমণের জন্য উপাদানগুলির সঠিক সংখ্যাটি জানা প্রয়োজন না , যদি না সেই সংখ্যা> 3 না হয় ( অনুগ্রহপূর্বক উত্তর দেখুন )। এটি প্রাসঙ্গিকভাবে বিশেষত ওপি-র জন্য বিশেষত কেবলমাত্র 2 টি আইটেম অদলবদল করতে চেয়েছিল।

— জেড

Answer 6

এখানে একটি সমাধান:

<style>
#firstDiv {
    position:absolute; top:100%;
}
#wrapper {
    position:relative; 
}

তবে আমার সন্দেহ হয় আপনার কাছে এমন কিছু সামগ্রী রয়েছে যা মোড়ক ডিভিশন অনুসরণ করে ...

Comments

হ্যাঁ ... পরিস্থিতিটির সাথে খুব বেশি বক্তব্য না দেওয়ার চেষ্টা করছেন, তবে নিম্নলিখিত অন্যান্য উপাদান রয়েছে। সীমাবদ্ধ এইচটিএমএল সরবরাহ করা সত্ত্বেও ভাল পরামর্শ - অন্য কারও জন্য কাজ করতে পারে।

— ডিভোমড

Answer 7

CSS3 ফ্লেক্সবক্স লেআউট মডিউল সহ, আপনি ডিভগুলি অর্ডার করতে পারেন।

#wrapper {
  display: flex;
  flex-direction: column;
}
#firstDiv {
  order: 2;
}

<div id="wrapper">
  <div id="firstDiv">
    Content1
  </div>
  <div id="secondDiv">
    Content2
  </div>
</div>

Answer 8

আপনি যদি জানেন, বা উচ্চ-উচ্চ-এলিমেন্টের জন্য আকারটি প্রয়োগ করতে পারেন তবে আপনি ব্যবহার করতে পারেন

position : absolute;

আপনার সিএসএসে এবং ডিভগুলি তাদের অবস্থান দিন।

অন্যথায় জাভাস্ক্রিপ্টে যাওয়ার একমাত্র উপায় মনে হচ্ছে:

fd = document.getElementById( 'firstDiv' );
sd = document.getElementById( 'secondDiv' );
fd.parentNode.removeChild( fd );
sd.parentNode.insertAfter( fd, sd );

বা অনুরূপ কিছু।

সম্পাদনা: আমি সবেমাত্র এটি পেয়েছি যা কার্যকর হতে পারে: ডাব্লু 3 ডকুমেন্ট সিএস 3 সরানো-তে

Answer 9

নেতিবাচক শীর্ষের মার্জিনগুলি এই প্রভাবটি অর্জন করতে পারে তবে তাদের প্রতিটি পৃষ্ঠার জন্য কাস্টমাইজ করা দরকার। উদাহরণস্বরূপ, এই মার্কআপ ...

<div class="product">
<h2>Greatest Product Ever</h2>
<p class="desc">This paragraph appears in the source code directly after the heading and will appear in the search results.</p>
<p class="sidenote">Note: This information appears in HTML after the product description appearing below.</p>
</div>

... এবং এই সিএসএস ...

.product { width: 400px; }
.desc { margin-top: 5em; }
.sidenote { margin-top: -7em; }

... আপনাকে প্রথমের উপরে দ্বিতীয় অনুচ্ছেদটি টানতে দেয়।

অবশ্যই, আপনাকে নিজের বর্ণনানুক্রমিকভাবে বিভিন্ন বর্ণনার দৈর্ঘ্যের জন্য নিজের সিএসএসটি সামঞ্জস্য করতে হবে যাতে ভূমিকাটির অনুচ্ছেদে উপযুক্ত পরিমাণটি বেড়ে যায় তবে আপনি যদি অন্য অংশগুলির সীমিত নিয়ন্ত্রণ এবং মার্কআপ এবং সিএসএসের উপর সম্পূর্ণ নিয়ন্ত্রণ রাখেন তবে এটি একটি বিকল্প হতে পারে ।

Answer 10

ঠিক আছে, কিছুটা নিখুঁত অবস্থান এবং কিছু ছদ্মবেশী মার্জিন সেটিংয়ের সাথে আমি কাছে যেতে পারি তবে এটি নিখুঁত বা সুন্দর নয়:

#wrapper { position: relative; margin-top: 4em; }
#firstDiv { position: absolute; top: 0; width: 100%; }
#secondDiv { position: absolute; bottom: 0; width: 100%; }

"মার্জিন-টপ: 4 এম" বিশেষত বাজে বিট: ফার্স্ট ডিভের সামগ্রীর পরিমাণ অনুসারে এই মার্জিনটি সামঞ্জস্য করা দরকার। আপনার যথাযথ প্রয়োজনীয়তার উপর নির্ভর করে এটি সম্ভব হতে পারে তবে আমি আশা করি যে কোনওরকম শক্ত সমাধানের জন্য কেউ এটি তৈরি করতে সক্ষম হবেন।

জাভাস্ক্রিপ্ট সম্পর্কে এরিকের মন্তব্য সম্ভবত অনুসরণ করা উচিত।

Answer 11

এটি কেবল সিএসএস দিয়েই করা যায়!

এই অনুরূপ প্রশ্নের আমার উত্তর চেক করুন:

https://stackoverflow.com/a/25462829/1077230

আমি আমার উত্তরটি দ্বিগুণ করতে চাই না তবে এর সংক্ষিপ্তটি হ'ল পিতা-মাতার একটি ফ্লেক্সবক্স উপাদান হওয়া দরকার। উদাহরণ:

(এখানে কেবল ওয়েবকিট বিক্রেতা উপসর্গ ব্যবহার করা হচ্ছে))

#main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

তারপরে, তাদের ক্রমের সাথে ইঙ্গিত দিয়ে চারদিকে অদলবদল করুন:

#main > div#one{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    overflow:visible;
}

#main > div#two{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

Answer 12

আপনার সিএসএসে, প্রথম ডিভিটি বাম বা ডানদিকে ভাসাবেন। দ্বিতীয় ডিভটি প্রথম হিসাবে বাম বা ডানদিকে ভাসান। দ্বিতীয় ডিভের জন্য উপরোক্ত দুটি ডিভের মতো clear: leftবা প্রয়োগ করুন right।

উদাহরণ স্বরূপ:

#firstDiv {
    float: left;
}

#secondDiv {
    float: left;
    clear: left;
}

Comments

<ডি ক্লাস = "ধারক"> <ডিভিডি আইডি = "সেকেন্ডডিভ"> <p> ... </ p> </ div> <ডি আইডি = "ফার্স্টডিভ"> <p> ... </ p> </ Div> </div>

— ভেসটেল

আমার ক্ষেত্রে ভাসা: ডান; পরিষ্কার: বাম; নিখুঁতভাবে কাজ করছেন

— ব্যবহারকারী 95656584

ক্লিয়ারটি ব্যবহার করা দুর্দান্ত উপায়, তবে মনে রাখবেন আপনার উপাদানটি সঠিক দিকে ভাসিয়ে নেওয়া উচিত এবং সঠিক করার জন্য আপনার অন্যান্য সমস্ত উপাদানগুলিও ভাসা উচিত। ভেসেল আপনার কিছু স্টাইল ব্যবহার করা উচিত: <স্টাইল> # সেকেন্ডডিভ, # ফার্স্টডিভ {ভাসা: বাম; } # ফার্স্টডিভ {পরিষ্কার: বাম; } </style> <div class = "ধারক"> ধারক <div id = "secondDiv"> <p> দ্বিতীয় ডিভ </ p> </div> <div id = "firstDiv"> <p> ফার্স্ট ডিভ </ p> </div> </div>

— রেজা আম্যা

Answer 13

আপনি যদি কেবল CSS ব্যবহার করেন তবে আপনি ফ্লেক্স ব্যবহার করতে পারেন।

.price {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: row-reverse; //revert horizontally
    //flex-direction: column-reverse; revert vertically
}

<div class="price">
      <div>first block</div>
      <div>second block</div>
</div>

Answer 14

আমি কেবল মোবাইল সংস্করণের জন্য ডিভের ক্রম পরিবর্তন করার উপায় খুঁজছিলাম যাতে আমি এটি সুন্দরভাবে স্টাইল করতে পারি। নিকফ জবাবের জন্য ধন্যবাদ আমি এই কোডের টুকরোটি তৈরি করতে পেরেছি যা আমি যা চেয়েছিলাম তার জন্য ভালভাবে কাজ করেছে, তাই আমি যদিও এটি আপনার সাথে ভাগ করে নিচ্ছি:

//  changing the order of the sidebar so it goes after the content for mobile versions
jQuery(window).resize(function(){
    if ( jQuery(window).width() < 480 )
    {
        jQuery('#main-content').insertBefore('#sidebar');
    }
    if ( jQuery(window).width() > 480 )
    {
        jQuery('#sidebar').insertBefore('#main-content');
    }
    jQuery(window).height(); // New height
    jQuery(window).width(); // New width
});

Answer 15

একটি বৃহত ব্রাউজার সমর্থন সহ একটি সমাধান তারপর ফ্লেক্সবক্স (আইই 9 তে কাজ করে):

#wrapper {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}
#wrapper > * {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

<div id="wrapper">
    <div id="firstDiv">
        Content to be below in this situation
    </div>
    <div id="secondDiv">
        Content to be above in this situation
    </div>
</div>
Other elements

display: table;সমাধানের বিপরীতে এই দ্রবণটি যখন .wrapperকোনও পরিমাণ বাচ্চা থাকে তখন কাজ করে ।

Comments

ডিভের কোনও চিত্র থাকে তবে কী হবে?

— রামজি সীদারমণ

Answer 16

সুনির্দিষ্ট করে display: flexএবং পিতামাতার ডিভের জন্য কেবল ফ্লেক্স ব্যবহার করুন flex-direction : column। তারপরে প্রথমে সন্তানের ডিভ কোনটি আসে তা নির্ধারণের জন্য ক্রম ব্যবহার করুন

Comments

আপনি কেন 7 বছরের পুরানো প্রশ্নের উত্তরটি ইতিমধ্যে পোস্ট করা তাদের চেয়ে ভাল বলে মনে করেন? আপনি যদি এসও তে অংশ নিতে চান তবে দয়া করে (ভাল) উত্তর ছাড়া প্রশ্নগুলি সন্ধান করুন এবং এটিকে এমন ফ্যাশনে অ্যাওয়ার্ড দেওয়ার চেষ্টা করুন যা সমস্ত দর্শকদের জন্য সহায়ক হবে।

— Marki555

Answer 17

সিএসএস সত্যই এইচটিএমএল ব্যাকএন্ড পুনর্গঠন করতে ব্যবহার করা উচিত নয়। তবে, যদি আপনি জড়িত উভয় উপাদানগুলির উচ্চতা জানেন এবং হ্যাকিশ বোধ করছেন তবে এটি সম্ভব। এছাড়াও, ডিভগুলির মধ্যে যাওয়ার সময় পাঠ্য নির্বাচনগুলি বিশৃঙ্খলাবদ্ধ হবে, তবে এটি HTML এবং CSS আদেশের বিপরীত কারণ।

#firstDiv { position: relative; top: YYYpx; height: XXXpx; }
#secondDiv { position: relative; top: -XXXpx; height: YYYpx; }

যেখানে XXX এবং YYY যথাক্রমে ফার্স্টডিভ এবং সেকেন্ডডিবের উচ্চতা। এটি শীর্ষের উত্তরের বিপরীতে পিছনের উপাদানগুলির সাথে কাজ করবে।

Comments

তারপরে , কোনও স্ক্রিন রিডারের জন্য নেভিগেশনের আগে সামগ্রী রাখার সময় "এইচটিএমএল পুনর্গঠনের জন্য কী ব্যবহার করা উচিত "?

— দামিয়ান ইয়ারিক

Answer 18

আমার তৈরি একটি আরও ভাল কোড আছে, এটি এত বড়, কেবলমাত্র দুটি জিনিস দেখানোর জন্য ... একটি 4x4 টেবিল তৈরি করুন এবং কেবল একটি ঘরের চেয়ে আরও উল্লম্ব সারিবদ্ধ করুন।

এটি কোনও আইই হ্যাক ব্যবহার করে না, উল্লম্ব-প্রান্তিককরণ নয়: মাঝারি; মোটেও ...

এটি উল্লম্ব কেন্দ্রিক প্রদর্শন-টেবিল, প্রদর্শন: টেবিল-রোমের জন্য ব্যবহার করে না; প্রদর্শন: টেবিল-সেল;

এটি একটি ধারকটির কৌশল ব্যবহার করে যাতে দুটি ডিভ থাকে, একটি লুকানো (অবস্থান সঠিক নয় তবে পিতামাতার সঠিক ভেরিয়েবল আকার থাকে), এটি লুকিয়ে থাকার পরেও শীর্ষে থাকে: -50%; সুতরাং এটি অবস্থানকে সংশোধন করে।

কৌশলগুলি তৈরি করার জন্য দ্বি ক্লাসগুলি দেখুন:

ক্লাসের নামগুলিতে স্প্যানিশ ব্যবহারের জন্য দয়া করে দুঃখিত (এটি কারণ যে আমি স্প্যানিশ বলি এবং এটি এতটাই জটিল যে আমি যদি ইংরেজী ব্যবহার করি তবে আমি হারিয়ে যাই)।

সম্পূর্ণ কোড:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<title>Vertical Centering in CSS2 - Example (IE, FF & Chrome tested) - This is so tricky!!!</title>
<style type="text/css">
 html,body{
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;
 }
 div.BloqueTipoTabla{
  display:table;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoFila_AltoAjustadoAlContenido{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoFila_AltoRestante{
  display:table-row;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoCelda_AjustadoAlContenido{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:auto;
 }
 div.BloqueTipoCelda_RestanteAncho{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:auto;
 }
 div.BloqueTipoCelda_RestanteAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:auto;height:100%;
 }
 div.BloqueTipoCelda_RestanteAnchoAlto{
  display:table-cell;margin:0px;border:0px;padding:0px;width:100%;height:100%;
 }
 div.BloqueTipoContenedor{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:100%;position:relative;
 }
 div.BloqueTipoContenedor_VerticalmenteCentrado{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Oculto{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:hidden;position:relative;top:50%;
 }
 div.BloqueTipoContenido_VerticalmenteCentrado_Visible{
  display:block;margin:0px;border:0px;padding:0px;width:100%;height:auto;visibility:visible;position:absolute;top:-50%;
 }
</style>
</head>
<body>
<h1>Vertical Centering in CSS2 - Example<br />(IE, FF & Chrome tested)<br />This is so tricky!!!</h1>
<div class="BloqueTipoTabla" style="margin:0px 0px 0px 25px;width:75%;height:66%;border:1px solid blue;">
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [1,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [1,4]
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [2,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [2,4]
  </div>
</div>
 <div class="BloqueTipoFila_AltoRestante">
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
     The cell [3,1]
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     *&nbsp;*&nbsp;*&nbsp;*
     <br />
     Now&nbsp;is&nbsp;the&nbsp;highest&nbsp;one
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;is<br />cell&nbsp;[3,2]
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAnchoAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This is cell [3,3]
      <br/>
      It is duplicated on source to make the trick to know its variable height
      <br />
      First copy is hidden and second copy is visible
      <br/>
      Other cells of this row are not correctly aligned only on IE!!!
     </div>
    </div>
   </div>
  </div>
  <div class="BloqueTipoCelda_RestanteAlto">
   <div class="BloqueTipoContenedor" style="border:1px solid lime;">
    <div class="BloqueTipoContenedor_VerticalmenteCentrado" style="border:1px dotted red;">
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Oculto">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
     <div class="BloqueTipoContenido_VerticalmenteCentrado_Visible" style="border:1px dotted blue;">
      This&nbsp;other is<br />the cell&nbsp;[3,4]
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="BloqueTipoFila_AltoAjustadoAlContenido">
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,1]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,2]
  </div>
  <div class="BloqueTipoCelda_RestanteAncho">
   [4,3]
  </div>
  <div class="BloqueTipoCelda_AjustadoAlContenido">
   [4,4]
  </div>
 </div>
</div>
</body>
</html>

Answer 19

পার্টিতে কিছুটা দেরি হলেও আপনি এটিও করতে পারেন:

<div style="height: 500px; width: 500px;">

<div class="bottom" style="height: 250px; width: 500px; background: red; margin-top: 250px;"></div>

<div class="top" style="height: 250px; width: 500px; background: blue; margin-top: -500px;"></div>

Answer 20

অথবা উপাদানটির কাছে একটি নিখুঁত অবস্থান নির্ধারণ করুন এবং অবধিটির প্রান্তের চেয়ে পৃষ্ঠার প্রান্ত থেকে ঘোষণা করে মার্জিনগুলি বন্ধ করুন। অন্যান্য স্ক্রিন মাপের ect এর জন্য এটি আরও উপযুক্ত হিসাবে% ব্যবহার করুন। এইভাবে আমি এই সমস্যাটিকে পরাভূত করেছি ... ধন্যবাদ, আপনি যা খুঁজছেন তা আশা করি ...

Answer 21

সিএসএসের কেবলমাত্র সমাধানের জন্য 1. হয় মোড়কের উচ্চতা স্থির করা উচিত বা ২ য় ডিভের উচ্চতা নির্ধারণ করা উচিত

Comments

এটি আসলে জিজ্ঞাসিত প্রশ্নের উত্তর দিতে কিছুই করে না। এটি একটি সম্ভাব্য সমাধানের দিকে ইঙ্গিত করে মন্তব্য করা ছাড়া আর কিছুই নয়।

— সিমনম্যান

Answer 22

.move-wrap {
    display: table;
    table-layout: fixed; // prevent some responsive bugs
    width: 100%; // set a width if u like
    /* TODO: js-fallback IE7 if u like ms */
}

.move-down {
    display: table-footer-group;
}

.move-up {
    display: table-header-group;
}

Comments

এই সমাধান ইতিমধ্যে পোস্ট করা হয়েছে 3 বছর আগে পুলিশের stackoverflow.com/a/12069537/1652962

— cimmanon

Answer 23

এটি CSS, কেবল ব্যবহার display:blockএবং z-indexসম্পত্তি দিয়ে সহজ

এখানে একটি উদাহরণ:

এইচটিএমএল:

<body>
    <div class="wrapper">

        <div class="header">
            header
        </div>

        <div class="content">
            content
        </div>
    </div>
</body>

সিএসএস:

.wrapper
{
    [...]
}

.header
{
    [...]
    z-index:9001;
    display:block;
    [...]
}

.content
{
    [...]
    z-index:9000;
    [...]
}

সম্পাদনা: এটা কিছু সেট করতে ভালো background-colorকরার div-sকিছু সঠিকভাবে দেখতে।

Answer 24

আমার এটি করার সহজ উপায় আছে।

<!--  HTML  -->

<div class="wrapper">

    <div class="sm-hide">This content hides when at your layouts chosen breaking point.</div>

    <div>Content that stays in place</div>

    <div class="sm-show">This content is set to show at your layouts chosen breaking point.</div>

</div>

<!--  CSS  -->

    .sm-hide {display:block;}
    .sm-show {display:none;}

@media (max-width:598px) {
    .sm-hide {display:none;}
    .sm-show {display:block;}
}

Comments

আপনার সমাধানটি সমস্যার সমাধান করতে পারে - তবে কেন আপনি কীভাবে / কীভাবে তা ব্যাখ্যা করতে পারেন / এস / ও-তে ব্র্যান্ড নিউবাইসের স্তুপ রয়েছে এবং তারা আপনার দক্ষতার কাছ থেকে কিছু শিখতে পারে। আপনার কাছে যা সুস্পষ্ট সমাধান হতে পারে তা তাদের মতো নাও হতে পারে।

— টেরিন পূর্ব

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

— j_s_stack