<style>.card-post__gallery {
display: block;
width: 100%;
height: 300px;
}
.card-post__gallery-left {
display: inline-block;
width: 60%;
height: 100%;
}
img {
width: 100%;
display: block;
}
.card-post__gallery-left .image {
height: 100%;
width: 45%;
display: inline-block;
background-color: #0d47a1;
vertical-align: top;
}
.card-post__gallery-left img {
width: 100%;
height: 100%;
}
.card-post__gallery-right {
display: inline-block;
width: 38%;
height: 100%;
vertical-align: top;
}
.card-post__gallery-right .image {
display: block;
width: 100%;
background-color: #0d47a1;
}
</style>ul {
margin: 0;
padding: 0;
list-style: none;
width: 30%;
display: block;
border-bottom: 1px solid #ccc;
}
ul li {
display: block;
width: 100%;
position: relative;
border-bottom: none;
border: 1px solid #ccc;
}
li ul {
position: absolute;
left: 100%;
top: 0;
width: 75%;
display: none;
}
ul li a {
display: block; text-decoration: none; color: #777;
font-size: 16px;
background: #fff;
padding: 5px;
}
ul li a:hover {
color: #E2144A; background: #f9f9f9;
}
li:hover ul {
display: block;
}
.nav {
margin-top: 10px;
}Диета 2
<ul class="nav" id="nav">
<li><a href="#">Понедельник</a>
<ul><li><a href="#">Голодовка</a></li></ul></li>
<li><a href="#">Вторник</a>
<ul>
<li><a href="#">Завтрак</a></li>
<li><a href="#">Обед</a></li>
<li><a href="#">Ужин</a></li>
</ul></li>
<li><a href="#">Среда</a>
<ul>
<li><a href="#">Завтрак</a></li>
<li><a href="#">Обед</a></li>
<li><a href="#">Ужин</a></li></ul></li>
<li><a href="#">Четверг</a>
<ul>
<li><a href="#">Завтрак</a></li>
<li><a href="#">Обед</a></li>
<li><a href="#">Полдник</a></li>
<li><a href="#">Ужин</a></li></ul></li>
<li><a href="#">Пятница</a>
<ul>
<li><a href="#">Голодовка</a></li></ul></li></ul><script>
startList=function(){var nodes=document.getElementById("nav").getElementsByTagName("LI");for(var i=0;i nodes[i].onmouseover=function(){this.className+=" over";}
nodes[i].onmouseout=function(){this.className=this.className.replace(new RegExp(" over\\b"),"");}}}
if(window.attachEvent)window.attachEvent("onload",startList);
</script><script>$(document).ready(function(){
$(".external.").click(function(){
$(".filter1").hide();});});</script><script>$(document).ready(function(){
$(".external.").click(function(){
$(".filter1").show();});});</script><div class="blocks">
<div class="block block1"></div>
<div class="block block2"></div>
<div class="block block3"></div>
</div>.blocks {
width: 100%;
}
.block {
width: 30%;
display: inline-block;
}
/* Уменьшаем размер экрана.
размер экрана 1026px */
@media screen and (max-width: 1026px) {
.blocks {
width: 80%;
}}
/* При длинне общего блока 80% от всей длинны экрана последнему блоку места не хватает, он спрыгивает вниз. */
/* А при длинне общего блока 50% уже и 2 блоку мало места, и что вам и надо, они дружно выстраиваются один под другим */
@media screen and (max-width: 900px) {
.blocks {
width: 50%;
}
.block {
width: 100%;
}}