具有正确div的AdminLTE信息框

时间:2018-01-02 09:15:09

标签: css

您好我使用AdminLTE模板,我想在信息框中添加下拉菜单。我的想法是信息框右侧的下拉按钮。这是我的代码:

<div class="info-box info-box-sm dropdown">
  <div class="info-box-icon bg-aqua">
    <i class="fa fa-briefcase"></i>
  </div>

  <div class="info-box-content">
    <span class="info-box-text">Title</span>
    <span class="info-box-number">369 records</span>
  </div>

  <div class="info-box-dropdown">
      <!-- Right side button for dropdown -->
  </div>
</div>

CSS:

 .info-box.info-box-sm { min-height: 45px; margin-bottom: 15px; font-size: 15px; }
.info-box.info-box-sm small { font-size: 12px; }
.info-box.info-box-sm .info-box-icon { height: 52px; width: 52px; font-size: 27px; line-height: 52px; }
.info-box.info-box-sm .info-box-content {
  margin-left: 52px;
}
.info-box .info-box-content .info-box-text{
    font-size: 15px!important;
}
.info-box .info-box-content .info-box-number{
    font-size: 15px!important;
}
.info-box.info-box-sm.dropdown{
    float: left;
}
.info-box.info-box-sm.dropdown .info-box-icon{
    background: blue;
}
.info-box.info-box-sm.dropdown .info-box-content{
    width: 70%;
    background: red;
    float: left;
}
.info-box.info-box-sm.dropdown .info-box-dropdown{
    float: right;
    background: blue;
}

这就是结果:

enter image description here

我需要这个:

enter image description here

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

.info-box.info-box-sm {
  min-height: 45px;
  margin-bottom: 15px;
  font-size: 15px;
  display: inline-flex;
}

.info-box.info-box-sm small {
  font-size: 12px;
}

.info-box.info-box-sm .info-box-icon {
  height: 52px;
  width: 52px;
  font-size: 27px;
  line-height: 52px;
}

.info-box.info-box-sm .info-box-content {
  //margin-left: 52px;
  height: 52px;
}

.info-box .info-box-content .info-box-text {
  font-size: 15px!important;
}

.info-box .info-box-content .info-box-number {
  font-size: 15px!important;
}

.info-box.info-box-sm.dropdown {
  float: left;
}

.info-box.info-box-sm.dropdown .info-box-icon {
  background: blue;
  display: inline-flex;
}

.info-box.info-box-sm.dropdown .info-box-content {
  width: 70%;
  background: red;
  float: left;
}

.info-box.info-box-sm.dropdown .info-box-dropdown {
  float: right;
  background: blue;
}
<div class="info-box info-box-sm dropdown">
  <div class="info-box-icon bg-aqua">
    <i class="fa fa-briefcase"></i>
  </div>

  <div class="info-box-content">
    <span class="info-box-text">Title</span>
    <span class="info-box-number">369 records</span>
  </div>

  <div class="info-box-dropdown">
    <!-- Right side button for dropdown -->
  </div>
</div>