Распределите элементы равномерно с помощью CSS
var foo = {
startMin: 1000
};
//Object.keys return all the keys in an object passed as parameter
//here your wanted key is at first position
var key = Object.keys(foo)[0];
//get the value
var value = foo[key]
//append whatever suffix you want
key += 'Cal';
var fooResults = {
//to use content of variable as key of object put variable in []
[key]: value
}
//another solution
//create emtyy object
var fooResults2 = {}
//use use variable name as index
fooResults2[key] = value
console.log('startMinCal: ' + fooResults.startMinCal) // This should log "1000" but won't until the object name inside `fooResults` is created correctly.
console.log('startMinCal: ' + fooResults2.startMinCal)6 ответов
Это - то, чего display:table-ячейка, как предполагается, достигает - однако, IE просто не делают этого, и FF <3 имеет проблемы с ним также, я верю.
Эти стили работают в FF3, Chrome, Safari, и (я думаю), Opera 9:
#menu ul {display:table;padding:0;}
#menu li {display:table-cell;text-align:center;}
Но Вам будет нужно справедливое небольшое количество взломы для получения их работающий в обычном, коммерческом наборе браузеров.
Да, можно сделать это, пока ширины элементов, которые будут распределены, известны заранее. Но это немного грязно.
Прием, Вы хотите интервал между каждым элементом‘ (Wp-сумма (туалет)) / (Nc-1)’, который является шириной родительского элемента минус общая ширина всех дочерних элементов, разделенных одинаково между количеством разрывов между элементами.
Поскольку CSS не имеет способности сделать выражения, мы должны взломать его немного. Сначала мы добавляем поле к родительскому элементу размера ‘сумма (туалет)’, общая ширина всех дочерних элементов. Таким образом, теперь родитель имеет ширину‘ (Wp-сумма (туалет))’, и мы можем использовать дополнительное значение в % относительно той ширины.
Так, например, для четырех изображений размеров 10 пкс, 20 пкс, 40 пкс и 80 пкс соответственно, наша ‘сумма (туалет)’ составляет 150 пкс. Набор, что как родительское поле, затем у детей может быть одна треть той ширины как дополняющий между ними.
<style type="text/css">
#nava { width: 10px; height: 20px;}
#navb { width: 20px; height: 20px;}
#navc { width: 40px; height: 20px;}
#navd { width: 80px; height: 20px;}
#nav { margin-right: 150px; white-space: nowrap; }
#nava, #navb, #navc { padding-right: 33.3%; }
</style>
<div id="nav"
><img id="nava" src="nava.png" alt="a"
><img id="navb" src="navb.png" alt="b"
><img id="navc" src="navc.png" alt="c"
><img id="navd" src="navd.png" alt="d"
></div>
Забавное добавление отступа тега должно постараться не там быть любым пробелом между изображениями. ‘nowrap’ необходим, потому что с родительской шириной устанавливает более узкий, чем страница width, иначе не было бы возможно соответствовать всем элементам на строке. Наконец, в IE Вы, возможно, должны добавить отделение обертки вокруг партии с ‘шириной: 100%; переполнение: скрытый’ для предотвращения нежелательных полос прокрутки, если Вы охватываете целую страницу. И конечно Вы захотите быть в Режиме Стандартов.
Это может работать с текстовыми элементами также, если Вы заставляете их встроить блоки, таким образом, можно добавить дополнение, и Вы измеряете их явно в Эмсе. Это не будет работать, если размеры дочерних элементов не будут известны заранее (например, они содержат динамический контент), поскольку Вы не будете знать, что ‘сумма (туалет)’ оценивает использованию.
Чтобы быть честным, я, вероятно, просто использовал бы таблицу. Алгоритм сервировки справляется очень гладко с вычислением, как распределить запасную таблицу width. (Используйте ‘сервировку: зафиксированный’ для лучших результатов с ячейками известной ширины, или 'автоматический' для ответа на динамические контенты.) Этот путь Вы также не должны волноваться о пиксельных погрешностях округления.
При использовании основанных на тексте размеров (их, исключая) это было бы намного легче. Можно затем иметь дело с буквами, а не пикселями.
Пример: Все это - 30 прописных букв широкая г-жа. Можно затем использовать ширину каждого военно-морского элемента (на основе его текстового содержания) и сделать математику статически оттуда.
AFAIK там не является никаким способом достигнуть этого только с CSS. Кто-либо исправляет меня, если это неправильно.
Если Вы пользуетесь Библиотекой Пользовательского интерфейса Yahoo! (YUI) grids.css, она могла бы работать.
Конечно, именно для этого и нужен элемент table. Грустно и смешно одновременно видеть, как люди скручивают себя в гордиев узел с помощью CSS, причем большинство из них даже не знают, почему они избегают таблиц.
Какую бы причину отказа от таблиц вы ни придумали, она не может быть хуже, чем зависимость от Javascript при верстке страницы.
Да, я знаю, что это не тот ответ, который вы искали, но, черт возьми, это так очевидно.