এইচটিএমএল / সিএসএস: একই উচ্চতায় দুটি ভাসমান বিভাগ তৈরি করা

106

আমার কাছে একটি অদ্ভুত সমস্যা রয়েছে যা আমি বর্তমানে একটি ব্যবহার করে সমাধান করছি table, নীচে দেখুন। মূলত, আমি দুটি ডিভগুলি উপলব্ধ প্রস্থের 100% গ্রহণ করতে চাই, তবে কেবলমাত্র প্রয়োজন হিসাবে উল্লম্ব স্থান গ্রহণ করব (যা চিত্র থেকে সত্যই প্রকট নয়)। দু'জনের মাঝে সর্বদা ঠিক একই উচ্চতা থাকা উচিত যা দেখানো হয়েছে them

_{(উত্স: pici.se )}

এটি tableবর্তমানে ব্যবহার করে করা খুব সহজ কাজ। তবে আমি সমাধানটির বিষয়ে খুব আগ্রহী নই, কারণ শব্দার্থগতভাবে এটি আসলে কোনও টেবিল নয়।

html css html-table

— ডেনিজ ডোগান
সূত্র

2

এর ... ছবিটা কোথায়? আমি জানি যে আমি এই বিষয়ে মন্তব্য করতে খুব দেরী করেছি

— অজয় কুলকার্নি

এখানে

— WebArchive.org

160

আপনি প্রচুর পরিমাণে নীচের প্যাডিং প্রয়োগ করে একই পরিমাণের নীচে নেতিবাচক মার্জিন এবং ওভারফ্লো লুকিয়ে থাকা ডিভের সাথে কলামগুলি ঘিরেই আপনি সিএসএসে সমান উচ্চতার কলামগুলি পেতে পারেন। উল্লম্বভাবে পাঠ্যটিকে কেন্দ্র করে নেওয়া একটু কৌশলযুক্ত তবে এটি আপনাকে পথে সহায়তা করা উচিত।

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

স্নিপেট প্রসারিত করুন

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

আমি এটি সমস্ত আধুনিক ব্রাউজারে এফএফ 3 + অপেরা 9 + ক্রোম সাফারি 3+ এবং আই 6/7/8 এ পরীক্ষা করেছি। এটি কুরুচিপূর্ণ কৌশল বলে মনে হতে পারে তবে এটি ভালভাবে কাজ করে এবং আমি এটি প্রোডাকশনে প্রচুর ব্যবহার করি।

আশা করি এটা কাজে লাগবে.

— নাটালি ডাউন
সূত্র

1

আমি যে কোডটি দিয়েছিলাম তা ডাব্লু 3 সি এর বৈধকরণকারীকে বৈধতা দেয় (ভাল, একবার আপনি <শিরোনাম> উপাদানটি যুক্ত করেন যা আপনার বিন্দু নয়)। তদুপরি, বিশেষ উল্লেখগুলি

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

1

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

— নাটালি ডাউন

2

প্রকৃতপক্ষে কেভিন সি দ্বারা প্রদত্ত সমাধানটি ছায়াগুলি কেটে দেওয়া সম্পর্কে শীর্ষ, বাম এবং ডান প্যাডিংয়ের জন্য কাজ করে, এটি নীচের অংশে কাজ করে না। এখনও অবধি কোনও সমাধান খুঁজে পেল না।

— জিনমার্টজ

1

নাটালি ভাল কাজ। @ লারস্ক অপ্রত্যাশিত উচ্চতা হ'ল এটি ঠিক কিসের জন্য নয়? ডেমো দেখুন: jsfiddle.net/RT3MT/4 "দীর্ঘ" অনুচ্ছেদগুলি চারপাশে সরানোর জন্য দেখুন

— jpillora

1

এটি আমি দেখেছি এমন কুরুচিপূর্ণ সিএসএস হ্যাকগুলির মধ্যে একটি, তবে আমি এটি উন্মুক্ত অস্ত্রের সাথে লল করে যাচ্ছি ol এটি এগিয়ে যাওয়ার একমাত্র উপায় বলে মনে হচ্ছে

— ম্যাট ভুকাস

98

এটি বছর 2012 + এন, সুতরাং আপনি যদি এখনই আই 6/7 display:table, display:table-rowএবং এর জন্য যত্নবান না হনdisplay:table-cell সব আধুনিক ব্রাউজারে কাজ:

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

আপডেট ২০১-0-০6-১:: আপনি যদি ভাবেন যে সময় এসে display:flexগেছে তবে ফ্লেক্সবক্স ফ্রগি দেখুন ।

— দিমিত্রি লেস্কোভ
সূত্র

30

এই উত্তরটি প্রতিস্থাপন করা হলে কোন বছর হবে display: flex?

— ল্যান্ডনশ্রপ্প

12

না, আমরা এখন ২০১৪ (;

— ফ্রান্সিসকো প্রেজেনসিয়া

9

আআআআআআন্ড এটি 2015 হ'ল বছরের শেষের দিকে আমরা প্রদর্শিত উত্তরটি পরিবর্তন করতে পারি: ফ্লেক্স :)

— মেটালওয়ার্ডো

5

আমি এখনও 1950 এর দশকে বাস করছি।

— জয়

1

হ্যালো ২০১ 2016 সালের! আমরা এখন নমনীয় ব্যবহার করতে পারি

— ব্রেট গ্রেগসন

20

এটি অর্জনের জন্য আপনার ফ্লেক্সবক্স ব্যবহার করা উচিত। এটি আইই 8 এবং আই 9 তে সমর্থিত নয় এবং কেবল আইই 10 এর -এসস উপসর্গ সহ নয়, তবে অন্যান্য সমস্ত ব্রাউজার এটি সমর্থন করে। বিক্রেতা উপসর্গগুলির জন্য, আপনার অটোপ্রিফিক্সারও ব্যবহার করা উচিত ।

.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}

— লুকা স্টেটিব
সূত্র

1

আমার ফ্লেক্সের সমস্যাটি হ'ল এটির জন্য কলামগুলির চারপাশে একটি মোড়ক প্রয়োজন। ফ্লোটস + ডিসপ্লে সহ: টেবিল কৌশলটি আমি যেমন শিরোনাম এবং কলামগুলির একগুচ্ছ থাকতে পারি এবং প্রভাবটি শিরোনামকে প্রভাবিত না করে কলামগুলিতে কাজ করে।

— স্টিজন ডি উইট

10

আপনি এই কাজটি জেএসের সাথে পেতে পারেন:

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>

— অ্যান্ডি পি ট্রিক্স
সূত্র

1

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

— নিরাজুল

1

আমি আসলে এই সমাধানটি পছন্দ করি। এটি মজাদার এবং দেখায় যে আপনি কেবল CSS এর মাধ্যমে আপনার এইচটিএমএলকেই পরিচালনা করতে পারবেন না, তবে আপনি এটি jquery এর সাহায্যেও করতে পারেন

— সিএসচার

6

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

— alexreardon

5

এটি সিএসএসে একটি ক্লাসিক সমস্যা। এর জন্য আসলে কোনও সমাধান নেই।

এ তালিকা অ্যাপার্টমেন্টের এই নিবন্ধটি এই সমস্যাটি সম্পর্কে ভাল পড়া। এটি সমতল -দৈর্ঘ্যের কলামগুলির মায়া তৈরি করে এমন কলামগুলিকে যুক্ত করে একটি উল্লম্ব টাইলড ব্যাকগ্রাউন্ড চিত্র থাকার উপর ভিত্তি করে এটি "ফ্যাক্স কলাম" নামে একটি কৌশল ব্যবহার করে। যেহেতু এটি ভাসমান উপাদানগুলির মোড়কে রয়েছে তাই এটি দীর্ঘতম উপাদান হিসাবে দীর্ঘ।

দ্য লিস্ট অ্যাপার্টমেন্টের সম্পাদকদের নিবন্ধটিতে এই নোটটি রয়েছে:

সম্পাদকদের কাছ থেকে একটি নোট: সময়কালের জন্য দুর্দান্ত হলেও এই নিবন্ধটি আধুনিক সেরা অনুশীলনগুলি প্রতিবিম্বিত করতে পারে না।

এই কৌশলটির জন্য সম্পূর্ণ স্থিতিশীল প্রস্থের নকশাগুলির প্রয়োজন হয় যা ক্রস-ডিভাইস সাইটের জন্য জনপ্রিয় তরল বিন্যাস এবং প্রতিক্রিয়াশীল ডিজাইন কৌশলগুলির সাথে ভাল কাজ করে না। স্থির প্রস্থ সাইটের জন্য, তবে এটি একটি নির্ভরযোগ্য বিকল্প।

— ফিলিপ লেবার্ট
সূত্র

আপনাকে ধন্যবাদ, এটি দুর্দান্ত হ্যাকের মতো মনে হচ্ছে। তবে, আমি উল্লেখ করতে ভুলে গেছি যে ডান কলামটিতে উল্লম্বভাবে কেন্দ্রে পাঠ্য থাকা উচিত। আমি কি বিশ্বাস করি যে মিথ্যা কলামগুলি এটি করতে পারে না?

— ডেনিজ ডোগান

4

আমার অনুরূপ সমস্যা ছিল এবং আমার মতে সর্বোত্তম বিকল্পটি হ'ল জাভাস্ক্রিপ্ট বা jquery এর কিছুটা ব্যবহার করা।

আপনি সর্বোচ্চ ডিভ মান পেয়ে এবং অন্যান্য মানকগুলিতে সেই মানটি প্রয়োগ করে আপনি একই উচ্চতায় ডিভড ডিভাইড পেতে পারেন। আপনার যদি অনেকগুলি ডিভ এবং অনেকগুলি সমাধান থাকে তবে আমি সমস্ত ডিভগুলির মধ্যে কোনটি সর্বোচ্চ এবং এটির মানটি ব্যবহার করার জন্য আমি সামান্য অগ্রিম জেএস কোডটি লিখতে পরামর্শ দিই suggest

Jquery এবং 2 ডিভ সহ এটি খুব সহজ, উদাহরণ কোড এখানে:

$('.smaller-div').css('height',$('.higher-div').css('height'));

এবং শেষের জন্য, 1 টি সর্বশেষ জিনিস আছে। তাদের প্যাডিং (উপরে এবং নীচে) একই হতে হবে! কারও বড় প্যাডিং থাকলে আপনার প্যাডিংয়ের পার্থক্য দূর করতে হবে।

— মিঃ ব্র
সূত্র

1

আমি যতদূর জানি, আপনি CSS এর বর্তমান প্রয়োগগুলি ব্যবহার করে এটি করতে পারবেন না। দুটি কলাম তৈরি করতে, সমান উচ্চতা-এডের আপনার জেএস প্রয়োজন।

— ক্যালিন ডন
সূত্র

1

এটি আইই 7, এফএফ 3.5, ক্রোম 3 বি, সাফারি 4 (উইন্ডোজ) এ আমার জন্য কাজ করে।

আপনি নীচের অংশে ক্লিয়ারার ডিভটি অসম্পূর্ণ করে তো আইই 6 তেও কাজ করে। সম্পাদনা করুন : যেমন নাটালি Downe বললেন, আপনি কেবল যোগ করতে পারেন width: 100%;করার #containerপরিবর্তে।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>

ডাইভ ডিভের মধ্যে পাঠ্যটি উল্লম্বভাবে কেন্দ্রের কোনও সিএসএস উপায় আমি জানি না, যদি ডিভটি নির্দিষ্ট উচ্চতার না হয়। যদি এটি হয় তবে line-heightআপনি ডিভ উচ্চতার সমান মানটিতে সেট করতে পারেন এবং আপনার পাঠ্যটি সহ একটি অভ্যন্তরীণ ডিভ রাখতে পারেন display: inline; line-height: 110%।

— উদাহরণস্বরূপ
সূত্র

1

জাভাস্ক্রিপ্ট ব্যবহার করে আপনি দুটি ডিভ ট্যাগ একই উচ্চতায় তৈরি করতে পারেন। নীচে প্রদর্শিত কোড ব্যবহার করে সবচেয়ে ছোট ডিভ ট্যাগের মতো ছোট উচ্চতাটি একই উচ্চতায় সামঞ্জস্য হবে:

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

"বাম" এবং "ডান" ডিভি ট্যাগগুলির আইডি এর সাথে।

— Quintox303
সূত্র

1

CSS সম্পত্তি -> প্রদর্শন ব্যবহার করে: টেবিল-ঘর

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}

<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>

স্নিপেট প্রসারিত করুন

0

জেএস ব্যবহার করে, data-same-height="group_name"আপনি একই উচ্চতা পেতে চান এমন সমস্ত উপাদানগুলিতে ব্যবহার করুন ।

উদাহরণ: https://jsfiddle.net/eoom2b82/

কোড:

$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});

— Wiliam
সূত্র

0

আমার অনুরূপ কিছু করা দরকার, এখানে আমার বাস্তবায়ন is উদ্দেশ্যটি পুনরায় কাটাতে, এটিতে 2 টি উপাদান একটি প্রদত্ত পিতামাতার ধারকটির প্রস্থ এবং উচ্চতা যতটা প্রয়োজন তত বেশি হওয়া উচিত। মূলত উচ্চতা সমান সর্বাধিক পরিমাণ সামগ্রীর উচ্চতার সমান, তবে অন্য ধারকটি ফ্লাশ হচ্ছে।

এইচটিএমএল

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

CSS

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}

— এই লোক
সূত্র

0

বেশ কিছু বছর আগে, floatসম্পত্তি সঙ্গে যে সমস্যা সমাধানের জন্য ব্যবহৃত tableব্যবহার পদ্ধতির display: table;এবং display: table-row;এবংdisplay: table-cell; ।

কিন্তু এখন আনমন সম্পত্তি সঙ্গে, আপনি এটা কোডের 3 লাইন দিয়ে সমাধান করতে পারে: display: flex;এবং flex-wrap: wrap;এবংflex: 1 0 50%;

.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
 // flex: flex-grow flex-shrink flex-basis;
    flex: 1 0 50%;
}

1 0 50%যথাক্রমে flexআমরা যে মান দিয়েছি flex-grow flex-shrink flex-basis। এগুলি পৃথকভাবে টাইপ করা এড়াতে এটি ফ্লেক্সবক্সের তুলনামূলকভাবে নতুন শর্টকাট। আমি আশা করি এটি কেউ কাউকে সাহায্য করবে

— ফুয়াদ বোকারডাইন
সূত্র