Question

我在div中显示标题和副标题。我遇到一个问题，当标题或副标题中的任何一个较长时，它们会混淆，否则标题和字幕较短，这不是问题。

要显示标题，我的CSS就是

.sch-task-name {
    margin: 5px 0;
}

并显示字幕

.sch-tool-text-activity {
    position: relative;
    top: -44px;
    font-size: 13px;
    margin-left: 1px;
    color: blue;
}

.sch-task-inner {
    height: inherit;
    overflow: hidden;
    padding: 27px 2px 7px 8px;
}

.sch-tool-ct {
    float: left;
    width: 100%;
    margin-top: 7px;
    padding-right: 20px;
}

HTML

<div class="sch-task-inner">
   <span class="sch-task-name"> Ticket Under Needs Information 2</span>
   <div class="sch-tool-ct">
      <span class="sch-tool-text-activity">Kanban Deliverable</span>
   </div>
</div>

这里sch-task-name显示title，sch-tool-text-activity显示字幕。

我是css的新手并且对此并不了解。

非常感谢任何帮助！提前致谢！

Answer 1

如果您的目标是在sch-tool-text-activity下显示sch-task-name而不重新排列HTML中的内容，那么您可能希望使用灵活的订单属性项目。

您需要先将父容器的显示设置为'display：flex'。然后，由于您希望它们堆叠，您必须通过设置'flex-wrap：wrap'（仍然在父容器上）允许项目流到多个链接。最后，您可以将跨度的顺序设置为'order：1'和'order：2'重新排列顺序，首先显示“1”。< / p>

更新了小提琴：https://jsfiddle.net/ph0rn16w/1/

.sch-task-name {
    margin: 5px 0;
    font-size:20pt;
    order:2;
}

.sch-tool-text-activity {
    position: relative;
    //top: -44px;
    font-size: 13px;
    margin-left: 1px;
    color: blue;
}

.sch-task-inner {
    height: inherit;
    overflow: hidden;
    padding: 27px 2px 7px 8px;
    display:flex;
    flex-wrap:wrap;
}

.sch-tool-ct {
    float: left;
    width: 100%;
    margin-top: 7px;
    padding-right: 20px;
    order:1;
}

标题和副标题混在一起

1 个答案: