Question

方案

我已经在引导网格中创建并放置了一个DIV。我在DIV中对齐4个项目，即。

标题（相对，100％宽度）
段落（绝对 - 左下）
段落（绝对 - 右下）
背景（绝对 - 100％宽度，4rem高度，底部）

Demo

问题

当我从DIV（CSS - 第118行）中删除边框时，（1）的边距会以（2）和（3）的边距折叠，（或者看起来就是这样。）可能是什么问题？

请注意

我无法为DIV指定固定高度，因为当标题中有更多内容时我需要展开DIV，如第三个DIV中可见。

Answer 1

似乎在没有border的情况下工作，而display: flex在＆＃34; .content＆＃34;和width: 100% on＆＃34; .title＆＃34;类。您也可以在＆＃34; .content-border-js＆＃34;上替换border outline。和＆＃34; .content-border-css＆＃34;为了避免在鼠标悬停在其中一个元素上时移动兄弟元素。

.content{
  position: relative;
  z-index: 1;
  display: flex;
  margin: 1rem auto;
  max-width: 25rem;
  background-color: white;
  /*border: 1px solid transparent;*/
  box-shadow: 2px 2px 2px #bbb;
  transition: border 100ms ease;
}

.content .title{
  text-align: center;
  width: 100%;
  font-size: 1.3rem;
  margin: 3rem 1rem 8rem;
}

.content-border-js{
  outline: 1px solid #f3df49;
}
.content-border-css{
  oultine: 1px solid #33a9dc;
}

编辑：没有FLEXBOX

没有flexbox的另一种解决方案：

在＆＃34; .content-border-js＆＃34;上设置outline和＆＃34; .content-border-css＆＃34;。然后在＆＃34; .content＆＃34;上使用overflow: auto类。

.content{
  position: relative;
  z-index: 1;
  margin: 1rem auto;
  overflow: auto;
  max-width: 25rem;
  background-color: white;
  /*border: 1px solid transparent;*/
  box-shadow: 2px 2px 2px #bbb;
  transition: border 100ms ease;
}

.content-border-js{
  outline: 1px solid #f3df49;
}
.content-border-css{
  oultine: 1px solid #33a9dc;
}

保证金在删除边界时崩溃

1 个答案: