不要从`table-cell`或`flex`继承高度和宽度

Question

有没有办法在响应时实现这一目标？

现在按钮从标题继承高度（宽度也会改变）。我宁愿不必在按钮上设置固定高度，也不必将其放在包装中。

http://jsfiddle.net/frank_o/JfnjY/14/

我尝试过使用table：

.container4 {
    display: table;
}
.container4 h1, .container4 .button {
    display: table-cell;
}
.container4 p {
    display: table-row;
}

flex：

.container1 {
    display: flex;
}
.container1 .button {
    margin-left: auto;
}
.container1 p {
    /* Add something here to make the `p` go below the `h1` */
}

我该怎么办？

Answer 1

的 DEMO

您可以保留table-cell属性，但不要直接在button课程中应用，而是使用table-cell＆amp;然后用这种方式定义你的按钮按钮不能应用全高！

<强> HTML：

<div class="container container4">
     <h1>Table-cell lipsum</h1>

    <div class="button-wrap">
        <div class="button">Click me</div>
    </div>

    <p>This is how I want it, except the button shouldn't inherit any height.</p>
</div>

<强> CSS：

.container4 h1, .container4 .button-wrap {
    display: table-cell;
    vertical-align: top;
}

将布局类与实际元素类分开是一种很好的做法。

Answer 2

实现这种布局可能有很多种方法。这是一种方法。

考虑以下HTML代码段：

<div class="container container1">
    <div class="button">Click me</div>
    <h1>Table-cell lipsum</h1>
    <p>This is how I want it, except the button shouldn't inherit any height.</p>
</div>
<div class="container container2">
    <div class="button">Click me</div>
    <div class="sub-wrap">
        <h1>Table-cell lipsum</h1>
        <p>This is how I want it, except the button shouldn't inherit any 
           height. Morbi consequat, purus nec suscipit luctus...</p>
    </div>
</div>

和以下CSS：

.container {
    border: 2px solid red;
    margin: 20px;
}
.button {
    padding: 5px 17px;
    border: 2px solid;
    display: inline-block;
    white-space: nowrap;
    float: right;
}
.container1 h1 {
    background-color: beige;
    overflow: auto;
    margin: 0;
}
.container1 p {
    background-color: pink;
}

.container2 .sub-wrap {
    overflow: auto;
    background-color: lightblue;
}

在这两种情况下，我都将按钮浮动到右侧并使用display: inline-block来缩小以适应宽度/高度，并使用white-space: nowrap将文本保持在一行上。

在第一种情况下.container1，我在overflow: auto上使用h1来防止文本干扰按钮。 p只会在标题和按钮下方的正常流程中显示。

在第二种情况下，.container2，我将标题和段落包含在具有.sub-wrap的块级元素overflow: auto中，这样段落和标题都没有包围按钮

请参阅演示：http://jsfiddle.net/audetwebdesign/Dap4M/