Question

我有一个<h3>元素需要保留在width:100%所以它仍然可以从我拥有的JavaScript中点击，但同时，我需要将描述放在右侧一行中的标题而不是通常与display:inline-block一起工作的下一行，但不是标题保持100％宽度，显然是推到新行。

h3.main.title {
    width:100%
}
.main.title {
    display:inline-block
}
.description {
    display:inline-block
}

<div class="header">
    <h3 class="main title">Category</h3>
        <div class="description">
            <p>Description</p>
        </div>
</div>

https://jsfiddle.net/kk5he25q/

我能以任何方式实现这一目标吗？

Answer 1

如果你真的需要将h3保持在100％，你可以将描述的位置设置为绝对（不要忘记使父div的位置相对）。但是，请记住h3和说明可能会重叠。在此处查看您更新的jsfiddle：https://jsfiddle.net/kk5he25q/1/

$(function(){
  $("#myModal").modal()
})

Answer 2

你可以使用float。

＆＃13;

DA

＆＃13;

h3.main.title {
  width: 100%;
}

.description {
  float: right;
  margin: 0;
}

＆＃13;

Answer 3

这样的东西？

＆＃13;

*{
    margin:0;padding:0;
}
.header {
    display: flex;
}

h3 {
    flex: 1;
    border: 1px solid;
    text-align: center;
    padding:15px;
}

.description {
    padding:15px;
    border: 1px solid;
}

＆＃13;

<div class="header">
    <h3 class="main title">Category</h3>
        <div class="description">
            <p>Description</p>
        </div>
</div>

＆＃13;

CSS重叠div与另一个div相对位置/内联块？

3 个答案: