HTML / CSS: Створення двох плаваючих знаків однакової висоти

106

У мене є невелика своєрідна проблема, яку я зараз вирішую за допомогою table, дивіться нижче. В основному, я хочу, щоб два діви займали 100% доступної ширини, але займали лише стільки вертикального простору, скільки потрібно (що насправді не так очевидно з малюнка). Вони завжди повинні мати однакову висоту з невеликою лінією між ними, як показано.

_{(джерело: pici.se )}

Це все дуже легко зробити, використовуючи table, що я зараз роблю. Однак я не надто захоплююся рішенням, оскільки семантично це насправді не таблиця.

html css html-table

— Деніз Доган
джерело

2

Е-е ... де малюнок? Я знаю, що я занадто пізно коментувати це

— Ajay Kulkarni

Ось посилання на зображення з веб-сайту

— DidThis

160

Ви можете отримати стовпці однакової висоти в CSS, застосувавши нижню прокладку великої кількості, нижню відмінність на ту саму суму та оточуючи стовпчики з перекриттям, що перекрито. Вертикальне центрування тексту трохи складніше, але це повинно допомогти вам в дорозі.

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

Розгорніть фрагмент

Я думаю, що це варто згадати попередня відповідь streetpc має недійсний html, тип документа - XHTML і навколо атрибутів є одиничні лапки. Також варто зазначити, що цевам не потрібен додатковий елемент з clearна, щоб очистити внутрішні поплавці контейнера. Якщо ви використовуєте приповнений переповнення, це очищає поплавці у всіх браузерах, які не входять до IE, а потім просто додає щось, щоб надати hasLayout, такі як ширина або масштабування: 1 призведе до того, що IE очистить його внутрішні плавки.

Я перевірив це у всіх сучасних браузерах FF3 + Opera9 + Chrome Safari 3+ та IE6 / 7/8. Це може здатися потворним трюком, але він працює добре, і я його дуже багато використовую у виробництві.

Я сподіваюся, що це допомагає.

— Наталі Даун
джерело

1

Код, який я дав валідацію у валідаторі W3C (добре, щойно ви додасте <title> елемент, який не був вашим пунктом). Більше того, специфікації дозволяють використовувати одиничні лапки відповідно до цього обговорення: sitepoint.com/forums/showthread.php?t=54273#6

— instanceof мені

1

Вибачте, моя помилка. Я змінив свою відповідь вище. Однак, зауважте, що у вашому методі, якщо правий стовпець стає більшим, ніж лівий, червоний колір показує під ним, оскільки два поля не мають правильної висоти. Залежно від дизайну, я б вибрав або штучні стовпчики, або цей метод із нижніми полями та накладками.

— Наталі Даун

2

Насправді, хоча рішення Кевіна К. про відсічення тіней працює для верхньої, лівої та правої підкладки, вона не працює для нижньої. Досі не знайшли рішення.

— ЖанМерц

1

Гарна робота Наталі. @laarsk Непередбачувана висота - це саме те, що не так? Дивіться демонстрацію: jsfiddle.net/RT3MT/4 перемістіть "довші" абзаци навколо, щоб побачити

— jpillora

1

Це один з найпотворніших хаксів CSS, який я коли-небудь бачив, але я збираюся прийняти його з розпростертими обіймами хаха. Здається, це єдиний шлях вперед

— Метт Вукас

98

Це 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 .

— Дмитро Лесков
джерело

30

Який рік буде, коли ця відповідь буде замінена display: flex?

— LandonSchropp

12

Ні, ми зараз у 2014 році (;

— Франсіско Презенсія

9

aaaaaaand це 2015 рік, можливо, до кінця року ми можемо змінити відповідь на показ: flex :)

— MetalWeirdo

5

Я все ще живу в 1950-х.

— Джей

1

Привіт з 2016 року! Зараз ми можемо використовувати flex

— Brett Gregson

20

Для цього вам слід використовувати флексбокс. Він не підтримується в IE8 та IE9 і лише з префіксом -ms в IE10, але всі інші браузери його підтримують. Для префіксів постачальника також слід використовувати автопрефіксатор .

.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

Проблема, яку я маю з flex, полягає в тому, що їй потрібна обгортка навколо стовпців. За допомогою floats + display: table техніка, яку я можу мати, наприклад, заголовок і купу стовпців, і ефект працює на стовпці, не впливаючи на заголовок.

— Штійн де Вітт

10

Ви можете отримати це за допомогою js:

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

— Енді П. Трикс
джерело

1

Зауважте, що це питання є вже досить старим, і кращі рішення (без необхідності JavaScript) вже надані.

— nirazul

1

Мені справді подобається таке рішення. Це цікаво і показує, що ви не тільки можете керувати своїм html за допомогою css, але також можете це зробити за допомогою jquery

— csichar

6

Це рішення не працюватиме, якщо висота стовпців зміниться. Це може статися, якщо зміст стовпців буде змінено. Цю функцію потрібно було б запустити: при зміні вмісту та розмірі браузера .on Підхід css є більш ідеальним, оскільки дозволяє уникнути цих проблем

— alexreardon

5

Це класична проблема в CSS. Насправді для цього не існує рішення.

Ця стаття з A List Apart є хорошою ознайомкою з цією проблемою. Він використовує техніку під назвою "штучні колони", засновану на тому, що на елементі, що містить стовпчики , є одне вертикальне плиткове фонове зображення, що створює ілюзію стовпців однакової довжини. Оскільки він знаходиться на обгортці з плаваючими елементами, він довший як найдовший елемент.

Редактори A List Apart мають цю примітку до статті:

Зауваження від редакції: Ця стаття може не відображати сучасних найкращих практик.

Ця технологія вимагає повністю статичної конструкції ширини, яка не добре працює з рідкими макетами та чуйними технологіями дизайну, які популярні сьогодні для сайтів з перехресними пристроями. Однак для сайтів зі статичною шириною це надійний варіант.

— Філіп Лейбаерт
джерело

Дякую, це здається приємним злом. Однак я забув зазначити, що правий стовпець повинен містити текст у ньому, вертикально по центру. Я правда вірю, що штучні колони цього не можуть зробити?

— Деніз Доган

4

У мене була подібна проблема, і на мій погляд, найкращий варіант - це використовувати лише трохи JavaScript або jquery.

Ви можете отримати бажані діви однакової висоти, отримавши найвище значення div та застосувавши це значення до всіх інших дівок. Якщо у вас є багато дівок і багато рішень, я пропоную написати невеликий js-код, щоб дізнатись, який з усіх дівок найвищий, а потім використати його значення.

З jquery та 2 дівами це дуже просто, ось приклад коду:

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

І для кінця, є 1 останнє. Їх підкладка (зверху і знизу) повинна бути однаковою! Якщо у вас є більш великі прокладки, вам потрібно усунути різницю.

— Пан Бр
джерело

1

Наскільки я знаю, ви не можете зробити це за допомогою поточних реалізацій CSS. Для виготовлення двох стовпців, рівних по висоті, потрібно JS.

— Калін Дон
джерело

1

Це працює для мене в IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).

Також працює в IE 6, якщо ви відмените чіткіший розділ внизу. Edit : як сказав Наталі Даун, ви можете просто додати 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 не має фіксованої висоти. Якщо це так, ви можете встановити те line-heightсаме значення, що і висота діва, і поставити внутрішній div, що містить ваш текст display: inline; line-height: 110%.

— приклад мене
джерело

1

Використовуючи 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 - "ліворуч" та "праворуч".

— Quintox303
джерело

1

Використовуючи властивість css -> display: table-cell

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

Використовуючи 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();
});

— Віліам
джерело

0

Мені потрібно було зробити щось подібне, ось моя реалізація. Щоб повторно визначити мету, потрібно, щоб два елементи займали ширину заданого батьківського контейнера, а висота була лише такою, якою вона повинна бути. По суті висота, що дорівнює максимальній висоті найбільшої кількості вмісту, але інша ємність знаходиться в потоці.

html

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

Але тепер, маючи властивість flex, ви можете вирішити це за допомогою 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відповідно. Це відносно нова комбінація клавіш у флексбоксі, щоб не набирати їх окремо. Я сподіваюся, що це комусь допоможе

— Фуад Букредін
джерело