面板有两个部分

Question

我试图创建一个包含两个部分的面板，如上图所示：左边是浅绿色部分，浅绿色部分周围是深绿色。

我怎样才能做到这一点？我尝试将span与inline-block放在div内并尝试height和width属性，但它不会产生预期效果。

Answer 1

Flexbox可以为此提供帮助。

1. 使用 display：flex property
创建容器
2. 在此容器中创建两个div，并为每个等于面板宽度100％或所需像素长度的像素添加 flex-basis 属性
   • E.g。 .panel {width = 500px; }，。div1 {flex-basis：100px; }，。div2 {flex-basis：400px; }
   • E.g。 .panel {width = 100％}，。div {flex-basis：25％; }，。div2 {flex-basis：75％; }
3. 相应地设置样式div（部分） - 高度，背景颜色，边框等
4. 在第二个div（右侧部分）中添加您的图标和样式

我使用FontAwesome CDN作为图标。
希望这有所帮助，你也可以看到我创建的Codepen。

<强> HTML     

<div class="container">
  <div class="div1"></div>
  <div class="div2">
    <i class="fas fa-plus-square"></i>
    <i class="fas fa-sync-alt"></i>
  </div>
</div>

<强> CSS

.container {
  display: flex;
}

.container div{
  height: 25px;
  width: 100%;
}

.div1{
  background-color:#abffb9;
  flex-basis: 2%;
  border: 1px solid #5cb85b;
}

.div2{
  background-color:#5cb85b;
  flex-basis: 98%;
  text-align: right;
  border: 1px solid #5cb85b;
}

.fas {
  color: #fff;
}

Answer 2

this你追求的是什么？ Flexbox非常适用于此，您可以阅读有关flexbox here的更多信息。

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  padding: 2px;
  background-color: green;
}

.green-box {
  flex: 0;
  min-width: 20px;
  background-color: Chartreuse;
}

.filler {
  flex: 1;
  text-align: right;
}

＆＃13;

<div class="wrapper">
  <div class="green-box">

  </div>
  <div class="filler">
    Icon
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;