HTML/CSS: صنع اثنين من divs العائمة نفس الارتفاع

StackOverflow https://stackoverflow.com/questions/1205159

  •  05-07-2019
  •  | 
  •  

سؤال

لدي مشكلة غريبة صغيرة أحلها حاليًا باستخدام أ table, ، انظر أدناه. في الأساس ، أرغب في الحصول على اثنين من divs يأخذ 100 ٪ من العرض المتاح ، ولكن فقط الاستيلاء على مساحة عمودية حسب الحاجة (وهذا ليس واضحا حقا من الصورة). يجب أن يكون للاثنان في جميع الأوقات نفس الارتفاع بالضبط مع خط صغير بينهما ، كما هو موضح.

alt text
(مصدر: pici.se)

هذا كله سهل للغاية باستخدامه table, ، وهو ما أفعله حاليا. ومع ذلك ، أنا لست حريصًا جدًا على الحل ، لأن هذا ليس في الواقع جدولًا.

هل كانت مفيدة؟

المحلول

يمكنك الحصول على أعمدة ذات ارتفاع متساو في CSS عن طريق تطبيق الحشو السفلي لكمية كبيرة ، والهامش السلبي السفلي من نفس الكمية والحيط بالأعمدة مع div التي تفوقت في التدفق. إن توسيط النص رأسياً أكثر صعوبة بعض الشيء ولكن هذا يجب أن يساعدك في الطريق.

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

أعتقد أنه يستحق ذكر ذلك تحتوي الإجابة السابقة التي أجراها RETREPC على HTML غير صالحة ، و Doctype هي XHTML وهناك علامات اقتباس واحدة حول السمات. تجدر الإشارة أيضًا إلى ذلك أنت لا تحتاج إلى عنصر إضافي مع clear من أجل مسح العوامات الداخلية للحاوية. إذا كنت تستخدم فائضًا مخفيًا ، فهذا يمسح العوامات في جميع المتصفحات غير IE ، ثم إضافة شيء لإعطاء haslayout مثل العرض أو التكبير: 1 سوف يتسبب IE في إزالة عواماتها الداخلية.

لقد اختبرت هذا في جميع المتصفحات الحديثة FF3+ Opera9+ Chrome Safari 3+ و IE6/7/8. قد يبدو الأمر وكأنه خدعة قبيحة ولكنها تعمل بشكل جيد وأنا أستخدمها في الإنتاج كثيرًا.

آمل أن يساعد هذا.

نصائح أخرى

إنه عام 2012+n ، لذلك إذا لم تعد تهتم بـ IE6/7 ، display:table, display:table-row و display:table-cell العمل في جميع المتصفحات الحديثة:

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

تحديث 2016-06-17: إذا كنت تعتقد أن الوقت قد حان display:flex, ، الدفع Flexbox Froggy.

يجب عليك استخدام FlexBox لتحقيق ذلك. لا يتم دعمه في IE8 و IE9 وفقط مع بادئة -MS في IE10 ، ولكن جميع المتصفحات الأخرى تدعمها. لبادئات البائعين ، يجب عليك أيضًا استخدامها Autoprefixer.

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

يمكنك الحصول على هذا العمل مع JS:

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

هذه مشكلة كلاسيكية في CSS. ليس هناك حقًا حل لهذا الغرض.

هذه المقالة من قائمة باخبين هي قراءة جيدة عن هذه المشكلة. يستخدم تقنية تسمى "أعمدة فو" ، استنادًا إلى وجود صورة خلفية مبلطة رأسياً على عنصر يحتوي على الأعمدة وهذا يخلق وهم الأعمدة المتساوية الطول. نظرًا لأنه موجود على غلاف العناصر العائمة ، فهو أطول عنصر.

تحتوي المحررين على القائمة A هذه الملاحظة على المقالة:

ملاحظة من المحررين: على الرغم من أن هذه المقالة ممتازة في وقتها ، فقد لا تعكس هذه المقالة أفضل الممارسات الحديثة.

تتطلب هذه التقنية تصميمات عرض ثابتة تمامًا لا تعمل بشكل جيد مع التخطيطات السائلة وتقنيات التصميم المستجيبة التي تحظى بشعبية اليوم لمواقع الجهاز. بالنسبة لمواقع العرض الثابتة ، فهو خيار موثوق به.

واجهت مشكلة مماثلة وفي رأيي الخيار الأفضل هو استخدام القليل من JavaScript أو JQuery.

يمكنك الحصول على divs المطلوبة ليكون نفس الارتفاع من خلال الحصول على أعلى قيمة div وتطبيق هذه القيمة على جميع divs الأخرى. إذا كان لديك العديد من divs والعديد من الحلول ، أقترح أن تكتب رمز JS المتقدم قليلاً لمعرفة أي من جميع divs هو الأعلى ثم استخدم قيمته.

مع jQuery و 2 divs ، يكون الأمر بسيطًا للغاية ، إليك رمز المثال:

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

وفي النهاية ، هناك شيء آخر. يجب أن تكون الحشو (أعلى وأسفل) هي نفسها! إذا كان لدى المرء حشوة أكبر ، فأنت بحاجة إلى التخلص من اختلاف الحشو.

على حد علمي ، لا يمكنك القيام بذلك باستخدام التطبيقات الحالية لـ CSS. لعمل عمود ، على قدم المساواة ، تحتاج إلى JS.

هذا يعمل بالنسبة لي في IE 7 ، FF 3.5 ، Chrome 3B ، Safari 4 (Windows).

يعمل أيضًا في IE 6 إذا قمت بتوضيح Div أكثر وضوحًا في الأسفل.يحرر: كما قال ناتالي داوني ، يمكنك ببساطة إضافة 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>

لا أعرف طريقة CSS لتوسيط النص رأسياً في Div الأيمن إذا لم يكن Div من ارتفاع ثابت. إذا كان الأمر كذلك ، يمكنك تعيين ملف line-height بنفس قيمة ارتفاع DIV ووضع DIV داخلي يحتوي على نصك مع display: inline; line-height: 110%.

باستخدام JavaScript ، يمكنك جعل علامتي Div نفس الارتفاع. سيتم ضبط DIV الأصغر ليكون نفس ارتفاع أطول علامة DIV باستخدام الكود الموضح أدناه: 

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

مع "اليسار" و "اليمين" كونها هوية علامات DIV.

باستخدام خاصية 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>

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>

باستخدام JS ، استخدم 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();
});

كنت بحاجة إلى القيام بشيء مماثل ، إليك تنفيذي. لتلخيص الغرض ، يكون هناك عنصرين يأخذان عرض حاوية الوالدين ، والارتفاع ليكون مرتفعًا فقط كما يجب أن يكون. في الأساس ، يساوي ارتفاع أقصى قدر من أكبر كمية من المحتوى ، ولكن الحاوية الأخرى هي تدفق.

لغة البرمجة

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

CSS

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top