Может кто-нибудь, пожалуйста, объясните мне, как я могу выполнить следующий эффект в CSS. Мне нужен div внизу, а два divs перекрывают его сверху, как показано на рисунке ниже.Как совместить верхние теги div в css
Ключ для регулировки верхнего поля меньших дивы. Установка отрицательного значения приведет к их увеличению по сравнению с большим. См. Код ниже.
В качестве альтернативы вы можете обернуть более мелкие divs в большую и отрегулировать нижнюю границу, чтобы вытащить их внизу.
.under {
width: 400px;
height: 150px;
background-color: #3C77D4;
}
.over{
background-color: #0E49AC;
width: 150px;
height: 150px;
display: inline-block;
margin: 0 23px;
margin-top: -80px;
}<div class="under"></div>
<div class="over"></div>
<div class="over"></div>Как комментарий @Liquidchrome Statens Есть много способов:
spencerlarry разместил один возможный путь, вот другой, это просто полезно, если вы определили ширину, которая может даже быть вычислен вами
вот мой код:
<div class="container">
<div class="topPane">
<div class="overlappingPane">
</div>
<div class="overlappingPane">
</div>
<div class="clearPane">
</div>
</div>
</div>
.container{
display:inline-block;
}
.topPane{
width:270px;
height: 50px;
border: 2px black solid;
background-color:red;
}
.overlappingPane{
background-color:blue;
float:left;
width: 90px;
height:90px;
margin: 20px 20px 20px 20px;
border: 2px black solid;
}
.clearPane{
clear:both;
}
и здесь Ссылка на jsfiddle: https://jsfiddle.net/npnz85x0/
Существует несколько способов достижения этой цели. У вас есть рабочий образец HTML/CSS, который мы можем посмотреть, чтобы помочь вам настроить то, что вы делаете? – Liquidchrome
SO больше для выпуска кода, который вы написали, чем платформы для предоставления кода на основе необходимых функций. При этом посмотрите на https://jsfiddle.net/jz6w10a1/, поскольку он должен указывать на вас в нужном направлении :) – GillesC
Вы хотите, чтобы Div # 1 и Div # 2 потребляли пространство внутри div или вы хотите, чтобы divs быть вне ?? –