如何正确围绕内容（间距）制作DIV包裹？

Question

我正在尝试根据其遇到的其他内容自动更改宽度。它应该很简单，但是我的DIV拒绝宽度不到100％。我已经尝试了多种方法来做到这一点。

最终，我试图使Div在左右两侧有一点间距（因此边框是整洁的），但是Div在另一个Divs下方。

我要实现的目标

我得到的（副标题为100％宽度及以下），

我尝试了许多事情来解决此问题，并使用Overflow：隐藏，漂浮：左...什么都没有。

下面的代码。

<div class="box">
<div class="side"></div>
<div class="psubheader">Test</div>
</div>

<style>

.box {
width: 50%;
height: 1000px;
border:1px solid;
}

.psubheader {
    padding-bottom:7px;
    font-family: 'sans-serif';
    font-size: 1.35em;
    border-bottom: 1px solid #a2a9b1;
margin-left:10px;
margin-right:-10px;
}

.side {
width: 50%;
height: 1000px;
background-color:red;
float:right;
}

感谢您的帮助。

Answer 1

删除任何float's。然后将flex设置为父母，并定义每个flex项目的宽度。在您的版本中，psubheader尚未定义宽度，并被带入浮动div。我要做的是使用文本元素（无论您喜欢哪个），然后在该元素上设置边框，然后限制宽度。

.box {
  width: 100%;
  height: 1000px;
  border: 1px solid;
  display: flex;
  flex-flow: row-reverse;
}

.psubheader {
  padding-bottom: 7px;
  font-family: 'sans-serif';
  font-size: 1.35em;
  width: 50%;
  border-bottom: 1px solid #a2a9b1;
  margin-left: 10px;
  margin-right: -10px;
}

.side {
  width: 50%;
  height: 1000px;
  background-color: red;
}

h5 {
  margin: 0;
  border-bottom: solid 1px #a2a9b1;
  width: 95%;
}

<div class="box">
  <div class="side"></div>
  <div class="psubheader">
    <h5 class="tst">Test</h5>
  </div>
</div>