Блог

Есть ли способ добиться этого, оставаясь отзывчивым?

Прямо сейчас кнопка наследует высоту от заголовка (его ширина также изменяется). Я бы предпочел не устанавливать фиксированную высоту на кнопке или помещать ее в оболочку.

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` */
}
  

Что мне делать?

Может быть много способов реализовать этот макет. Вот один из способов сделать это.

Рассмотрим следующие фрагменты 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 on h1 , чтобы текст не мешал кнопке. p Просто будет в обычном потоке под заголовком и кнопкой.

Во втором случае .container2 я заключил заголовок и абзац в элемент уровня .sub-wrap блока, который overflow: auto таким образом не обтекает кнопку ни абзацем, ни заголовком.

Смотрите демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/Dap4M /

ДЕМОНСТРАЦИЯ

Вы можете сохранить 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;
}
  

Рекомендуется хранить классы компоновки отдельно от классов фактических элементов.