Как я достигаю равных отделений высоты (расположенный рядом) с HTML / CSS?
Исходные файлы SO 20-го века.
В теле функции / метода имеет смысл представлять процедурную логику в виде линейного текста. Даже когда логика не является строго линейной, у нас есть хорошие программные конструкции (циклы, операторы if и т. Д.), Которые позволяют нам четко представлять нелинейные операции с использованием линейного текста.
Но нет никакой причины, по которой я должен был бы разделять мои классы по отдельным файлам или сортировать мои функции / методы / поля / свойства / и т. Д. В определенном порядке в этих файлах. Почему мы не можем просто выбросить все эти вещи в большой файл базы данных и позволить IDE позаботиться о динамической сортировке всего? Если я хочу отсортировать своих участников по имени, я нажму на заголовок участника в таблице участников. Если я хочу отсортировать их по доступности, я нажму на заголовок доступности. Если я хочу просмотреть свои классы как дерево наследования, я нажму на кнопку, чтобы сделать это.
Возможно, классы и члены можно рассматривать пространственно, как если бы они были чем-то вроде сущностей в виртуальном мире. По желанию программиста среда IDE может автоматически размещать классы & amp; члены, которые используют друг друга рядом с , так что их легко найти. Возможность визуализации в масштабах этого виртуального мира. Уменьшите масштаб до конца, и вы сможете именовать галактики с небольшими классовыми планетами. Увеличьте пространство имен, и вы можете увидеть планеты классов с континентами методов, островами и внутренними классами как вращающиеся спутники. Нажмите на метод, и вы увидите ... исходный код этого метода.
По сути, я хочу сказать, что в современных языках не имеет значения, в какие файлы вы помещаете свои классы или в каком порядке вы определяете членов класса, так почему же мы все еще вынуждены использовать эти архаичные практики? Помните, когда вышел Gmail и Google сказал: «Не сортируй»? Ну, а почему нельзя применить ту же философию к языкам программирования?
4 ответа
Вы могли бы использовать jQuery, но есть более эффективные способы сделать это.
Такого рода вопросы возникают часто, и обычно есть 3 ответа ...
1 . Использовать CSS
Это «лучший» способ сделать это, поскольку это наиболее семантически чистый подход (без обращения к JS, у которого есть свои проблемы). Лучше всего использовать дисплей : таблица-ячейка и связанные значения. Вы также можете попробовать использовать технику искусственного фона (которую вы можете делать с градиентами CSS3).
2. Use Tables
Кажется, это отлично работает, но за счет бессмысленного макета. Вы также вызовете переполох среди пуристов. Я почти избегал использования таблиц, и вы должны тоже.
3. Используйте jQuery / JavaScript
Это дает преимущество в виде наиболее семантической разметки, за исключением того, что JS отключен, вы не получите желаемого эффекта.
Вот способ сделать это с помощью чистого CSS, однако, как вы заметите в примере (который работает в IE 7 и Firefox), границы могут быть трудными, но они не невозможно, поэтому все зависит от того, что вы хотите сделать. В этом примере предполагается довольно распространенная структура CSS: тело> оболочка> контейнер содержимого> столбец 1 и столбец 2.
Ключ - это нижнее поле и его отменяющее заполнение.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal Height Columns</title>
<style type="text/css">
<!--
* { padding: 0; margin: 0; }
#wrapper { margin: 10px auto; width: 600px; }
#wrapper #main_container { width: 590px; padding: 10px 0px 10px 10px; background: #CCC; overflow: hidden; border-bottom: 10px solid #CCC; }
#wrapper #main_container div { float: left; width: 263px; background: #999; padding: 10px; margin-right: 10px; border: 1px solid #000; margin-bottom: -1000px; padding-bottom: 1000px; }
#wrapper #main_container #right_column { background: #FFF; }
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="main_container">
<div id="left_column">
<p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
</div><!-- LEFT COLUMN -->
<div id="right_column">
<p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
<p> </p>
<p>For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?</p>
<p> </p>
<p>Is there some JavaScript (jQuery) code to accomplish this?</p>
</div><!-- RIGHT COLUMN -->
</div><!-- MAIN CONTAINER -->
</div><!-- WRAPPER -->
</body>
</html>
Вот как это выглядит:
Ну, я не использую тонну jQuery, но в мире CSS / Javascript я бы просто использовал объектную модель и написал следующее утверждение:
if(leftDiv.style.height > rightDive.style.height)
rightDiv.style.height = leftDiv.style.height;
else
leftDiv.style.height = rightDiv.style.height)
Также есть плагин jQuery под названием equalHeights, который я использовал с некоторым успехом.
Я не уверен, что тот, который я использую, принадлежит группе нитей, упомянутой выше , или, если это , это был первый результат Google ... В любом случае плагин jquery, вероятно, самый простой и гибкий путь.