html - w3schools - what is css




কিভাবে আমি আমার divs সিএসএস সঙ্গে পুনর্গঠন করতে পারেন? (16)

এইচটিএমএল অন্যান্য প্রয়োজনীয়তার কারণে এইচটিএমএল সংশোধন করা যাবে না এমন একটি টেমপ্লেটটি দেওয়া হয়েছে, যেখানে এটি এইচটিএমএল-এ যাতে কোনও অর্থে না থাকলে কোন 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% হতে বিবেচনা করুন।

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

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


CSS3 ফ্ল্যাশবক্স লেআউট মডিউল দিয়ে, আপনি divs অর্ডার করতে পারেন।

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

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

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


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

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

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

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


আপনি শুধু এই প্রয়োজন! CSS এ বাম বা ডান দ্বারা প্রথম div ভাসা। প্রথম হিসাবে বাম বা ডান একই দ্বারা দ্বিতীয় div ভাসা। দ্বিতীয় div জন্য উপরে দুই div হিসাবে বাম বা ডান একই। উদাহরণ স্বরূপ:

#firstDiv {
    float: left;
}

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

আমার বন্ধু মজা আছে।


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

<!--  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;}
}

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

//  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
});

এই Flexbox ব্যবহার করে করা যাবে।

উভয় প্রদর্শন প্রযোজ্য একটি ধারক তৈরি করুন : ফ্লেক্স এবং flex-flow: কলাম-বিপরীত

/* -- 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://.com/a/25462829/1077230

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

(শুধুমাত্র এখানে ওয়েবকিট বিক্রেতা উপসর্গ ব্যবহার করুন।)

#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;
}

একটি বৃহত্তর ব্রাউজার সমর্থন তারপর সমাধান flexox (IE9 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; বিপরীতে display: table; সমাধান এই সমাধান কাজ করে যখন। .wrapper শিশুদের কোনো পরিমাণ আছে।


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

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

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


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

<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; }

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

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


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

<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>


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

position : absolute;

আপনার CSS এবং divs তাদের অবস্থান দিতে।

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

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

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

সম্পাদনা: আমি শুধু এটি দরকারী হতে পারে যা পাওয়া যায়: w3 ডকুমেন্ট css3 সরানো-টু


সিএসএসের জন্য শুধুমাত্র সমাধানের জন্য 1. মোড়কটির উচ্চতা ঠিক করা উচিত বা 2. দ্বিতীয় ডিভিটির উচ্চতা ঠিক করা উচিত


একটি CSS-only সমাধান ( IE10+ জন্য কাজ করে) - ফ্লেক্সবক্সের 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


.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;
}




css3