সিএসএসে ঘোরানো উপাদানগুলি যা তাদের পিতামাতার উচ্চতাকে সঠিকভাবে প্রভাবিত করে

Question

ধরা যাক আমার কাছে কয়েকটি কলাম রয়েছে, যার মধ্যে কয়েকটিতে আমি এর মানগুলি ঘোরান like

http://jsfiddle.net/MTyFP/1/

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

এই সিএসএস সহ:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

এটি দেখতে এইভাবে শেষ হয়:

টেক্সট অন্যান্য উপাদানগুলি ওভারল্যাপ না করে এমন কোনও সিএসএস লিখতে পারে যা ঘোরানো উপাদানটিকে তার পিতামাতার উচ্চতার উপর প্রভাব ফেলবে? এটার মতো কিছু:

Comments

স্ট্যাকওভারফ্লো.com

— পিট

রাইটিং-মোড এখন বেশিরভাগ ব্রাউজারের জন্য উপলব্ধ (আই আই 5 বৈশিষ্ট্য হিসাবে ব্যবহার করুন) আমি আজকাল করব jsfiddle.net/MTyFP/698 দেখুন: বিকাশকারী.মোজিলা.আর

— জি-সিরিলাস

@ জি-cyr writing-modeহয় প্রাপ্তিসাধ্য সবচেয়ে ব্রাউজারের জন্য, কিন্তু ভয়ঙ্করভাবে বগী। কোনও সম্পর্কিত প্রশ্নে, ছেড়ে দেওয়ার আগে আমি ব্রাউজার-নির্দিষ্ট বাগের চারপাশে কাজ করার চেষ্টা করার একাধিক পুনরাবৃত্তি করেছি; আপনি আমার স্ট্যাকওভারফ্লো . com / posts / 47857248 / revisions এ ব্যর্থতার উত্তরসূরি দেখতে পাচ্ছেন , যেখানে আমি ফায়ারফক্স বা এজ না করে ক্রোমে কাজ করে এমন কিছু দিয়ে শুরু করি, তারপরে অন্য দুটি স্থির করার প্রক্রিয়াতে ক্রোমকে ভেঙে ফেলুন এবং আমার পুনরায় ফিরে আসুন উত্তর এবং কেবলমাত্র ক্রোম হিসাবে লেবেল করা। সাবধান হন, আপনি যদি এই পথে যেতে চান। (এছাড়াও নোট করুন যে এটি অ-পাঠ্য উপাদানগুলির সাথে কোনও ব্যবহারের নয়))

— মার্ক অ্যামেরি

আফাইক রাইটিং-মোড কেবল পাঠ্যক্রমে কাজ করে ...

— ফ্রেড্রিক জোহানসন

Answer 1

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

সংক্ষিপ্ত উত্তর

এইচটিএমএল দেওয়া হয়েছে, যেখানে আপনি ঘোরাতে চান .element-to-rotate...

<div id="container">
  <something class="element-to-rotate">bla bla bla</something>
</div>

... আপনি ঘুরতে চান এমন উপাদানটির চারপাশে দুটি মোড়কের উপাদান প্রবর্তন করুন :

<div id="container">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <something class="element-to-rotate">bla bla bla</something>
    </div>    
  </div>
</div>

... এবং তারপরে বিরোধী-ঘড়ির কাঁটার দিকে ঘোরানোর জন্য নিম্নলিখিত সিএসএস ব্যবহার করুন (বা transformএটিকে ঘড়ির কাঁটার দিকে ঘোরানোর উপায়টির জন্য মন্তব্য দেখুন ):

.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

স্নিপেট ডেমো স্ট্যাক করুন

p {
  /* Tweak the visuals of the paragraphs for easier visualiation: */
  background: pink;
  margin: 1px 0;
  border: 1px solid black;
}
.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

<div id="container">
  <p>Some text</p>
  <p>More text</p>
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <p class="element-to-rotate">Some rotated text</p>
    </div>    
  </div>
  <p>Even more text</p>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <img class="element-to-rotate" src="https://i.stack.imgur.com/ih8Fj.png">
    </div>
  </div>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
</div>

কিভাবে কাজ করে?

আমি উপরে যে জ্বলন্ত পদগুলি ব্যবহার করেছি তার মুখে বিভ্রান্তি যুক্তিযুক্ত; অনেক কিছু চলছে, এবং সামগ্রিক কৌশলটি সোজা নয় এবং এটি বুঝতে সিএসএস ট্রিভিয়া সম্পর্কে কিছু জ্ঞানের প্রয়োজন। এর ধাপে ধাপে এগিয়ে চলুন।

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

1. একরকম কিছু গঠন করা অন্যান্য উপাদান যার উচ্চতা প্রস্থ সমান.element-to-rotate
2. আমাদের রূপান্তরটি লিখুন .element-to-rotateযেমন ধাপ 1 থেকে উপাদানটিতে একেবারে ওভারলে করতে।

পদক্ষেপ 1 থেকে উপাদানটি হবে .rotation-wrapper-outer। তবে কীভাবে আমরা এর উচ্চতা.element-to-rotate এর প্রস্থের সমান হতে পারি?

আমাদের কৌশল কী উপাদান এখানে padding: 50% 0উপর .rotation-wrapper-inner। এই এর কাজে লাগান জন্য বৈশিষ্ট একজন অদ্ভুতস্বভাব বিস্তারিতpadding : যে শতাংশ paddings, এমনকি জন্য padding-topএবং padding-bottomসবসময় এর শতকরা হিসাবে সংজ্ঞায়িত করা হয় উপাদান এর ধারক প্রস্থ । এটি আমাদের নিম্নলিখিত দুটি পদক্ষেপের কৌশল সম্পাদন করতে সক্ষম করে:

1. আমরা সেট display: tableউপর .rotation-wrapper-outer। এর ফলে এটি সঙ্কুচিত-থেকে-ফিট প্রস্থের কারণ হয়ে দাঁড়ায় যার অর্থ এর প্রস্থটি এর বিষয়বস্তুর অভ্যন্তরীণ প্রস্থের উপর ভিত্তি করে সেট করা হবে - যা এর অভ্যন্তরীণ প্রস্থের উপর ভিত্তি করে .element-to-rotate। (ব্রাউজার সমর্থন, আমরা সঙ্গে আরো পরিচ্ছন্নভাবে এই অর্জন পারে width: max-content, কিন্তু ডিসেম্বর 2017 থেকে, max-contentহয় এখনো এজ সমর্থিত নয় ।)
2. আমরা সেট heightএর .rotation-wrapper-inner0, তারপর তার প্যাডিং সেট 50% 0(যে, 50% উপরে এবং 50% নীচে)। এর ফলে এটি তার পিতামাতার প্রস্থের 100% প্রস্থের সমান উল্লম্ব স্থান গ্রহণ করতে পারে - যা, পদক্ষেপ 1 এর কৌশল দ্বারা, প্রস্থের সমান .element-to-rotate।

এরপরে, অবশিষ্টাংশগুলি হ'ল সন্তানের আসল আবর্তন এবং অবস্থান সম্পাদন করা। স্বাভাবিকভাবেই, transform: rotate(-90deg)ঘূর্ণনটি করে; আমরা transform-origin: top left;ঘোরানো উপাদানটির উপরের বাম কোণার চারদিকে ঘূর্ণন ঘটানোর কারণ হিসাবে ব্যবহার করি যা পরবর্তী অনুবাদটিকে তর্ক করতে সহজ করে তোলে, কারণ এটি ঘোরানো উপাদানটিকে সরাসরি উপরে ফেলে দেয় যেখানে অন্যথায় আঁকানো হত। এরপরে আমরা translate(-100%)উপাদানটিকে তার পূর্ব-ঘূর্ণন প্রস্থের সমান দূরত্বে টেনে আনতে ব্যবহার করতে পারি ।

এটি এখনও ঠিক অবস্থানটি ঠিকমতো পায় না, কারণ আমাদের এখনও 50% শীর্ষ প্যাডিংয়ের জন্য অফসেট করা দরকার .rotation-wrapper-outer। আমরা নিশ্চিত করছি যেন যে অর্জন .element-to-rotateহয়েছে display: block(যাতে মার্জিন এটা সঠিকভাবে কাজ করবে) এবং তারপর একটি -50% আবেদন margin-topদয়া করে মনে রাখবেন শতাংশ মার্জিন হয় - এছাড়াও মূল উপাদানের প্রস্থ আপেক্ষিক সংজ্ঞায়িত।

এবং এটাই!

কেন এটি সম্পূর্ণরূপে অনুমানযোগ্য নয়?

অনুমানের শতাংশ প্যাডিংস এবং মার্জিনের সংজ্ঞা থেকে নিম্নলিখিত নোটটির কারণে (বোল্ডিং মাইন):

শতাংশ থেকে সম্মান সঙ্গে গণনা করা হয় প্রস্থ উত্পন্ন বক্স এর ধারণকারী ব্লক এমনকি, 'প্যাডিং টপ' এবং 'প্যাডিং-নীচে' । যদি ধারণকৃত ব্লকের প্রস্থটি এই উপাদানটির উপর নির্ভর করে তবে ফলাফল লেআউটটি সিএসএস ২.১ এ সংজ্ঞায়িত করা আছে।

যেহেতু পুরো কৌশলটি আভ্যন্তর মোড়কের উপাদানগুলির প্যাডিংটিকে তার ধারকটির প্রস্থের সাথে সম্পর্কিত করে ঘুরিয়ে দেয় যা ঘুরে ঘুরে তার সন্তানের প্রস্থের উপর নির্ভর করে, তাই আমরা এই শর্তটিকে আঘাত করছি এবং অপরিজ্ঞাত আচরণটি শুরু করছি। এটি বর্তমানে সমস্ত চারটি প্রধান ব্রাউজারে কাজ করে, যদিও - আমি চেষ্টা করেছি এমন কিছু আপাতদৃষ্টিতে বর্ণনামূলক-সামঞ্জস্যপূর্ণ টুইটগুলির বিপরীতে যেমন পিতামাতার পরিবর্তে .rotation-wrapper-innerভাইবোন হিসাবে .element-to-rotateপরিবর্তিত হওয়া।

Comments

আমি এই মুহুর্তের উত্তর হিসাবে গ্রহণ করেছি। writing-modeযদি IE 11 থাকতে সমর্থিত হতে হবে না সমাধান সেরা পদ্ধতির হবে।

— ক্রিস

উল্লেখযোগ্য ক্যাচ: 45 ডিগ্রির মতো অন্যান্য রোটেশনের জন্য কাজ করে না।

— ই ভিলিগার

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

— গিলশালিত

@ চিহ্ন-অ্যামেরি, আমাকে আমার কোডের জন্য সিএসএস সমন্বয় করতে হয়েছিল: আপনার সিএসএসের সাথে ইমগুর.com / a / ZgafkgE ১ ম চিত্র, আমি অ্যাডজাস্টমেন্টের সাথে ২ য় স্থানে ট্রান্সফর্মআরগিন: 'শীর্ষ বাম', এবং পরিবর্তিত রূপান্তর: 'অনুবাদ (-100%) ) ', রূপান্তর করতে:' অনুবাদ (20%) ', <ডিভ স্টাইল = {{ফ্লেক্স দিকনির্দেশ:' কলাম ', প্রান্তিককরণ:' কেন্দ্র ',}}> <ডিভ স্টাইল = {{প্রদর্শন:' টেবিল ', মার্জিন: 30 ,}}> <ডিভ স্টাইল = {{প্যাডিং: '50% 0 ', উচ্চতা: 0}}> <img src = {চিত্র} স্টাইল = {{প্রদর্শন:' ব্লক ', মার্জিনটপ:' -50% ', রূপান্তর : 'ঘোরান (-90deg) অনুবাদ (20%)', সর্বোচ্চপথ: 300, সর্বোচ্চ উচ্চতা: 400,}} /> </div> </div> <ডিভ> {শিরোনাম} </div> </div>

— ড্যান বিটার ২

Answer 2

হিসাবে জি-cyr মন্তব্য আইনসঙ্গতভাবে তুলে ধরে, বর্তমান সমর্থন writing-modeশালীন বেশী । একটি সাধারণ ঘোরার সাথে মিলিত, আপনি যে সঠিক ফলাফলটি চান তা পেতে পারেন। নীচে উদাহরণ দেখুন।

.statusColumn {
  position: relative;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 2px;
  width: 200px;
}

.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
}

<div class="container">
  <div class="statusColumn"><span>Normal</span></div>
  <div class="statusColumn"><a>Normal</a></div>
  <div class="statusColumn"><b>Rotated</b></div>
  <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

Comments

আমি খুশী হয়ে স্ক্রোল করে গেলাম - এটি আমাকে ঘূর্ণন এবং অনুবাদগুলি ব্যবহার করে ব্যথার জগতে রক্ষা করেছিল।

— জেমস ম্যাকলফলিন

প্রশ্নটিতে writing-mode: vertical-lr; transform: rotate(180deg);

— রোটেশনটির

Answer 3

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

এটি 90 than (যেমন transform: rotate(45deg)) এর চেয়ে কম ঘোরানোর কল্পনা করুন : আপনাকে এমন অদৃশ্য বাক্সটি প্রবর্তন করতে হবে যা এখন আপনি ঘুরছেন এমন বস্তুর মূল মাত্রা এবং প্রকৃত ঘূর্ণন মানের উপর ভিত্তি করে অস্পষ্ট মাত্রা রয়েছে।

হঠাৎ, আপনি শুধুমাত্র নেই widthএবং heightবস্তুর আপনি আবর্তিত করেছেন, কিন্তু আপনি আছে widthএবং heightএটি প্রায় "অদৃশ্য বক্স" এর। এই বস্তুর বাইরের প্রস্থের জন্য অনুরোধ করার কল্পনা করুন - এটি কী ফিরে আসবে? অবজেক্টের প্রস্থ, না আমাদের নতুন বাক্স? কীভাবে আমরা উভয়ের মধ্যে পার্থক্য করব?

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

(কেবল পরিষ্কার করার জন্য, আপনি element.getBoundingClientRectপূর্বে উল্লিখিত আয়তক্ষেত্রটি ব্যবহার করার চেষ্টা করতে পারেন )।

অনুমান হিসাবে বর্ণিত :

এইচটিএমএল নেমস্পেসে ট্রান্সফর্ম সম্পত্তিটি রূপান্তরকারী উপাদানটির চারপাশের সামগ্রীর প্রবাহকে প্রভাবিত করে না।

এর অর্থ হ'ল আপনি নিজের হাতে এগুলি না করা পর্যন্ত আপনি যে বিষয়টিকে রূপান্তর করছেন তার চারপাশের সামগ্রীতে কোনও পরিবর্তন করা হবে না।

আপনি যখন আপনার অবজেক্টকে রূপান্তর করবেন তখন কেবলমাত্র সেই জিনিসটি বিবেচনায় নেওয়া হবে সেটি হল ওভারফ্লো অঞ্চল:

(...) ওভারফ্লো ক্ষেত্রের ব্যাপ্তি রূপান্তরকারী উপাদানগুলিতে গ্রহণ করে। উপাদানগুলি আপেক্ষিক পজিশনিংয়ের মাধ্যমে অফসেট হয়ে যাওয়ার পরে যা ঘটে তার সাথে সমান ।

আরও জানতে এই jsfiddle দেখুন।

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

আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করে এটি পরিচালনা করতে চান তবে এই প্রশ্নটি একবার দেখুন ।

Comments

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

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

Answer 4

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

.statusColumn {
    position: relative;
    border: 1px solid #ccc;
    padding: 2px;
    margin: 2px;
    width: 200px;
}

.statusColumn i, .statusColumn b, .statusColumn em, .statusColumn strong {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.statusColumn b:before{ content:''; padding:50% 0; display:block;  background:red; position:relative; top:20px
}

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

http://jsfiddle.net/MTyFP/7/

এই সমাধানটির একটি লিখন আপ এখানে পাওয়া যাবে: http://kizu.ru/en/fun/rotated-text/

Comments

এই সমাধান সমস্যা যে উপাদান তার মূল প্রস্থ রাখে, তাই (উদাহরণস্বরূপ) একটি টেবিল, যদি বিস্তৃত সেল ছিল, এটা যে কলাম আউট ওয়াইড অপ্রয়োজনীয় হোয়াইটস্পেস সঙ্গে ধাক্কা হবে হবে গ্রহণ করা হয়েছে যদি টেক্সট ছিল ঘোরানো হয়নি। ওইটা বিরক্তিকর.

— জেজ

@ লাইটেক, আপনি কি দয়া করে jsfiddle.net/MTyFP/7 এ একবার দেখতে পারেন ? আমি ইমেজ নিয়ে প্রায় একই সমস্যা আছে। প্রশ্ন: স্ট্যাকওভারফ্লো.com

— আওলাদ লিটন

Answer 5

আমার অন্যান্য উত্তরে আপডেট সংস্করণ দেখুন । এই উত্তর আর বৈধ নয় এবং সহজভাবে আর কাজ করে না। আমি এটি এখানে historicalতিহাসিক কারণে ছেড়ে দেব।

---

এই প্রশ্নটি বেশ পুরনো, তবে এই ঝরঝরে পদ্ধতিটি একসাথে ব্যবহার করার ক্ষমতার সাথে এই .getBoundingClientRect()অবজেক্টটি এবং এর widthএবং heightমানগুলির বর্তমান সমর্থন সহ transformআমি মনে করি আমার সমাধানটিও উল্লেখ করা উচিত।

এটি এখানে কর্মে দেখুন । (ক্রোম 42, এফএফ 33 এবং 37 এ পরীক্ষিত))

getBoundingClientRectউপাদানটির প্রকৃত বাক্স প্রস্থ এবং উচ্চতা গণনা করে । একদম সহজভাবে, তবে আমরা সমস্ত উপাদানের মধ্য দিয়ে লুপ করতে পারি এবং তার বাচ্চাদের আসল বাক্সের উচ্চতায় এর ন্যূনতম-উচ্চতা নির্ধারণ করতে পারি।

$(".statusColumn").each(function() {
    var $this = $(this),
        child = $this.children(":first");
    $this.css("minHeight", function() {
        return child[0].getBoundingClientRect().height;
    });
});

(কিছু সংশোধন করার মাধ্যমে আপনি বাচ্চাদের মধ্য দিয়ে লুপটি খুঁজে পেতে পারেন এবং কোনটি সবচেয়ে লম্বা এবং পিতামাতার উচ্চতা সবচেয়ে লম্বা সন্তানের কাছে নির্ধারণ করতে পারেন However তবে, আমি উদাহরণটি আরও সোজাসাপ্টা করার সিদ্ধান্ত নিয়েছি You এছাড়াও আপনি পিতামাতার প্যাডিং যুক্ত করতে পারেন আপনি চাইলে উচ্চতা বা আপনি সিএসএসে কোনও প্রাসঙ্গিক box-sizingমান ব্যবহার করতে পারেন ))

নোট করুন, তবে, অবস্থানটি আরও নমনীয় এবং নির্ভুল করতে আমি আপনার সিএসএসে একটি translateএবং যুক্ত করেছি transform-origin।

transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;

Comments

সত্যি? একটি জকিউরি উত্তর সহ একটি সিএসএস প্রশ্ন এবং আপনি এটিকে একটি সঠিক উত্তর বলছেন @ মিশেললম্ব্রোসো? এটি হ্যাঁ কাজ করে তবে জাভাস্ক্রিপ্ট বা jQuery এর মতো একটি সম্পূর্ণ জেএস লাইব্রেরির দরকার নেই

— নেবুলোসার

পছন্দ করুন সেই সময়ে (ইতিমধ্যে আড়াই বছর আগে!) এটিই একমাত্র উত্তর যা পজিশনিং বা সিউডো উপাদানগুলি ভাল কাজ না করায় কোনও সমস্যা সৃষ্টি করে না। ভাগ্যক্রমে, কিছু বৈশিষ্ট্যের জন্য ব্রাউজার সমর্থন উন্নত হয়েছে। আমার সম্পাদনা দেখুন।

— ব্রাম ভ্যানরোয়

এটি মূলত একটিতে দুটি সম্পূর্ণ সম্পর্কযুক্ত উত্তর। এক প্রশ্নের একাধিক উত্তর পোস্ট করা নিয়মের মধ্যে পুরোপুরি; আমি মনে করি 2017 এ যুক্ত হওয়া আপনার নতুন সমাধানটি যদি একটি নতুন উত্তর হয়ে থাকে তবে দুটি সম্পূর্ণ পৃথক উত্তর পৃথক পৃথকভাবে ভোট দেওয়া এবং পৃথকভাবে মন্তব্য করা যেতে পারে it

— মার্ক অ্যামেরি

@ মার্কআমেরি আপনি ঠিক বলেছেন আমি প্রশ্নটি সম্পাদনা করেছি এবং এখানে একটি নতুন উত্তর যুক্ত করেছি ।

— ব্রাম ভ্যানরোয়

আমি এই উত্তরটি এবং চিত্র লোড ইভেন্টটি ব্যবহার করে চিত্রগুলির জন্য একটি কার্যকর সমাধান পেতে সক্ষম হয়েছি: $ pic.on ('লোড', ফাংশন () {$ pic.css ('মিনিটের উচ্চতা', $ পিক [0] .getBoundingClientRect ()। উচ্চতা);});

— মাইকা এল।

Answer 6

আমি জানি এটি একটি পুরানো পোস্ট তবে ঠিক একই সমস্যার সাথে লড়াই করার সময় আমি এটি খুঁজে পেয়েছি। যে সমাধানটি আমার পক্ষে কাজ করে তা হ'ল ডিভকে ঘিরেই ক্রুড "লো-প্রযুক্তি" পদ্ধতিটি আমি 90deg দ্বারা প্রচুর পরিমাণে ঘোরান by

<br>

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

Comments

হতে পারে এটি কাজ করে তবে আপনার কখনই এটি করা উচিত নয়।

— এমএমএম

আপনার প্রতিক্রিয়ার জন্য ধন্যবাদ! হ্যাঁ, অবজেক্টটি যখন ঘোরানো হয় তখন আমি পিক্সেলগুলিতে উচ্চতা সামঞ্জস্য করতে ডিভের মার্জিন-শীর্ষের সম্পত্তিটি ব্যবহার করি a

— ভিস্ক_স্ক