Question

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

我认为主div内实际上总共需要三个div（浅灰色）。主边框div（100％宽度...深灰色示例），那么在该div内将再增加两个div。小图标的div（宽度为20％），标题内容的div（宽度为80％）。

如何将这三个div（深灰色）放置在主div（浅灰色）内，使其在顶部像边框一样？任何简短的示例将不胜感激。

提供了指向示例图像的链接...

Answer 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>

Answer 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>

Answer 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

Answer 4

您的想法很好，只需确保使用一致的命名惯例即可。您可以随意使用以下示例：

Vectror3

.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内的Div-位于顶部

4 个答案: