Question

我有以下HTML代码：

<div class="demand page">
    <div id="crumby-title">
            <div class="page-icon">
                <i class="fa fa-line-chart"></i>
            </div>
            <div class="page-title">
                Demand 
            </div>
    </div>   
    <div id="chart" class="demand-chart">
    </div>
</div>

和css / less：

.rtm {
    .app__header {
        background-color: #ffffff;
        box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
    }
    .app__inner-content {
        background-color: #ffffff;
    }

    .demand-chart{
        padding-top: 50px;
    }
    #crumby-title {
        display: block;
        border-bottom: 1px solid #eee;
    }
    .page-icon {
        font-size: 20px;
        position: absolute;
        padding: 14px 18px;
        background: #e7e7e7;
    }
    .page-title {
        float: left;
        font-size: 20px;
        font-weight: 5px 10px 10px 75px;
        height: 55px;
    }
}

我尝试这样做是为了显示页面图标和页面标题一个接近另一个但现在如何完成它们是一个在另一个上面（图标位于标题的顶部）

我该如何解决这个问题？感谢

Answer 1

将float:left提供给.page-icon而不是position:absolute，并在<div class="clear"></div>之后添加page-title。

＆＃13;

.app__header {
  background-color: #ffffff;
  box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
  background-color: #ffffff;
}
.demand-chart{
  padding-top: 50px;
}
#crumby-title {
  display: block;
  border-bottom: 1px solid #eee;    
}
.page-icon {
  font-size: 20px;
  float: left;
  padding: 14px 18px;
  background: #e7e7e7;
}
.page-title {
  float: left;
  font-size: 20px;
  font-weight: 5px 10px 10px 75px;
  height: 55px;
}
.clear{
  clear:both;
}

＆＃13;

<div class="demand page">
  <div id="crumby-title">
    <div class="page-icon">
        <i class="fa fa-line-chart"></i>
    </div>
    <div class="page-title">
        Demand 
    </div>
    <div class="clear"></div>
  </div>   
  <div id="chart" class="demand-chart">
  </div>
</div>

＆＃13;

Answer 2

我想告诉你另一个版本的ankita pantel将它们放在一个表格中并将padding-top添加到Demand

＆＃13;

    .app__header {
    background-color: #ffffff;
    box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}
.app__inner-content {
    background-color: #ffffff;
}

.demand-chart{
    padding-top: 50px;
}
#crumby-title {
    display: block;
    border-bottom: 1px solid #eee;
}
.page-icon {
    font-size: 20px;
    padding: 14px 18px;
    background: #e7e7e7;
}
.page-title {
    padding-top: 30px;
    float: left;
    font-size: 20px;
    font-weight: 5px 10px 10px 75px;
    height: 55px;
}

＆＃13;

    <div class="demand page">
    <div id="crumby-title">
        <table>
            <tr>
            <td>
            <div class="page-icon">
                <i class="fa fa-line-chart"></i>
            </div>
            </td>
            <td>
            <div class="page-title">
                Demand 
            </div>
            </td>
            </tr>
        </table>
    </div>   
    <div id="chart" class="demand-chart">
    </div>
</div>

＆＃13;

Answer 3

当你说＆＃34;彼此靠近时＃34;我假设你的意思是＆＃34;彼此相邻＆＃34;。

您可以将int main() { int n,k; cin>>n>>k; vector <int> a(n); vector <int> r(k,0); for(int i=0;i<n;i++) { cin>>a[i]; r[a[i]%k]++; } int ctr=min(1,r[0]); for(int a=1;a<(k/2+1);a++) { if(a!=k-a) ctr+=max(r[a],r[k-a]); } if(k%2==0&&r[k/2]!=0) ctr++; cout<<ctr; return 0; }属性添加到flexbox。然后从#crumby-title和position中删除float和.page-icon个媒体资源。您也可以从page-title

中删除height

＆＃13;

.page-title

＆＃13;

.app__header {
  background-color: #ffffff;
  box-shadow: 1px 2px 2px rgba(1, 1, 1, 0.15);
}

.app__inner-content {
  background-color: #ffffff;
}

.demand-chart {
  padding-top: 50px;
}

#crumby-title {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.page-icon {
  font-size: 20px;
  padding: 14px 18px;
  background: #e7e7e7;
}

.page-title {
  font-size: 20px;
  font-weight: 5px 10px 10px 75px;
}

＆＃13;

Answer 4

所有很酷的孩子都在使用弹性盒子。

显示：弯曲;挠曲方向：行;使子项堆叠成一排。（flex-direction：行是默认值，因此你可以跳过它）

#crumby-title {
    ...
    display: flex;
    flex-direction:row;
}

然后您可以（如果需要）使用

对文本进行居中

.page-title {
    ....
    display: flex;
    align-items: center;
}

Fiddle

把两个div放在另一个附近

4 个答案: