Можно ли это сделать с помощью HTML / CSS или мне нужно использовать какой-нибудь JavaScript?
.. это можно сделать с помощью чистого CSS, используя display: table-cell .. но естьнет поддержки iE7 и ниже: (
Вот решение, использующее оба метода (jQuery * и CSS), jQuery, конечно, сделает то же самое для других браузеров, но это решение означает, что большинство пользователей получатчистое решение CSS с IE7 и ниже, нуждающееся в jQuery для «улучшения»
, если вы хотите использовать решение jQuery для всех браузеров, тогда вам не понадобятся свойства отображения table-cell или table-row ипотребуется удалить хак !ie7 из свойства float - поплавки также должны содержаться кросс-браузерно, чтобы вы могли добавить overflow: hidden в #iconsHolder div - и просто оставить zoom: 1; на месте, если вам нужноэто работает в IE6;)
CSS:
#content {
width: 60em;
margin: 0px auto;
}
#iconsHolder {
display: table-row; /* good browsers - IE7 and below ignore this */
zoom: 1; /* for IE to contain the floats so the jQuery can get a height from it */
/* overflow: hidden; would be needed here if jQuery solution is preferrred */
}
#info,#comp,#story {
width: 18em;
padding-left: 1em;
padding-right: 1em;
padding-top: 2em;
background-color: #DDD;
display: table-cell;
float: left !ie7; /* IE7 and below hacked value - remove the !ie7 part to expose this to all browsers */
}
#info_content,#comp_content,#story_content {
text-align: center;
}
#details {
clear: both;
background-color: #EEF;
padding: 1em;
}
HTML:
<div id="content">
<div id="iconsHolder">
<div id="info">
<div id="info_content">
<p><img src="http://placekitten.com/100/100/" alt=""></p>
<h2>Some guy over here</h2>
<p class="light justify">It doesn't matter what is being said at the moment. Nothing is said here.</p>
</div>
</div>
<div id="comp">
<div id="comp_content">
<p><img src="http://placekitten.com/100/100/" alt=""></p>
<h2>Computer Development</h2>
<p class="light justify">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
</div>
</div>
<div id="story">
<div id="story_content">
<p><img src="http://placekitten.com/100/100/" alt=""></p>
<h2>Story telling</h2>
<p class="light justify">This is another short story.</p>
</div>
</div>
</div>
<div id="details">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
jQuery: (внутри условного комментария, поэтому только IE7 и ниже sэ-э))
<!--[if lte IE 7]>
<script type="text/javascript">
$(document).ready(function() {
var divHeight = $("#iconsHolder").outerHeight();
$("#iconsHolder > div").css("height", divHeight);
});
</script>
<![endif]-->
Примечание: на скрипке не добавлен jQuery, так как я не знаю, как это вставитьусловный комментарий к скрипке)
- Я прошу прощения, если вы предпочитаете чистое решение javascript, я не могу этого сделать - но я уверен, что если выхочу, чтобы кто-то мог добавить чистый JS к моему ответу для вас!