Div 内的 Div - 位于顶部答案

【问题标题】：Div Within a Div - Positioned at the TopDiv 内的 Div - 位于顶部
【发布时间】：2019-02-22 03:11:35
【问题描述】：

我想在另一个 div 中放置一个 div。重点是在 div 的顶部创建一个边框。边框将包括左侧的小图标图像和标题。

我认为在主 div 中实际上总共需要三个 div（浅灰色）。主边框 div（100% 宽度......深灰色示例），然后在该 div 内将有两个 div。小图标的 div（20% 宽度）和标题内容的 div（80% 宽度）。

您如何在主 div（浅灰色）内定位这三个 div（深灰色）以充当顶部的边框？任何简短的例子将不胜感激。

提供了一个示例图像的链接...

enter image description here

【问题讨论】：

标签： html css

【解决方案1】：

这样的事情可能会让你开始：

.panel {
  display: block;
  position: relative;
  width: 30vw;
  height: 50vh;
  background-color: #CCC;
}

.panel header {
  width:100%;
  background-color: #999;
  border-bottom: 1px solid black;
}

.panel footer {
  font-size: 60%;
  position: absolute;
  bottom: 0;
  width:100%;
  border-top: 1px solid black;
  text-align: center;
}

<section class="panel">
  <header>
    something something
  </header>
  <div class='content'>
    content content
  </div>
  <footer>
    panel footer
  </footer>
</section>

【讨论】：

【解决方案2】：

使用这个

.cont {
  width:400px;
  height:500px;
  background: lightgray;
  position: relative;
}

.header {
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
  height:80px;
  background: gray;
  color:#fff;
  font-size:40px;
  font-family: sans-serif;
  line-height:80px;
  padding:0 0px 0 70px;
  box-sizing:border-box;
}

img {
  position: absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
}

<div class="cont">
  <div class="header">
    <img src="https://picsum.photos/50" alt="">
    HEADLİNE
  </div>
</div>

【讨论】：

【解决方案3】：

<div class="box">
  <h2>
    <span class="box__icon"></span>
    Headline
  </h2>
  <div class="box__content">
    Content
  </div>
</div>

https://codepen.io/anon/pen/OdYaeY

【讨论】：

【解决方案4】：

您的想法很好，只要确保使用一致且适合您的命名约定即可。这是一个您可以随意使用的示例：

.container { 
  width: 300px; 
  height: 350px;
  margin: 0 auto; 
  font-family: Arial, Helvetica, Verdana;
  font-size: .95rem;
 }
.header { 
  background: #999; 
  color: white;
  text-transform: uppercase;
  padding:.5em;
  font-size: 1.3rem;
}
.header .icon {
  display:inline-block;
  min-height: 1rem;
  min-width: 20px;
  border: 1px solid white;
}
.body { 
  background: #ccc; 
  height: 100%; 
  padding: 1rem;
}

<div class="container">
  <div class="header">
    <span class="icon"></span>
    <span class="title">headline</span>
  </div>
  <div class="body">
    This is your body block
  </div>
</div>

【讨论】：