Как заставить другие кнопки на том же самом div наследовать размер высоты намного большей кнопки?

Question

Как заставить другие кнопки на том же самом div наследовать размер высоты намного большей кнопки?

0

Использование HTML с CSS.

На одном div у меня есть три кнопки, каждая из которых имеет разный класс (стиль границы), закодированный в CSS. Я заставил кнопки вести себя там, где их ширина фиксирована, а высота изменяется в зависимости от длины текста.

Проблема заключается в том, что, когда одна кнопка меняет размер (высота), другие кнопки не следуют или не наследуют одну и ту же высоту, которую также настраивает div.

Вот мой код в HTML:

  <div class="container-1020-Apx">

        <button type="button" class="btn-styleLT">The quick brown fox jumped over the lazy rabbit because it is not paying attention to it mother who cried wolf. </button>
        <button type="button" class="btn-styleCT"> middle </button>
        <button type="button" class="btn-styleRT"> right </button>
  </div>

Вот мой код в CSS:

 .container-1020-Apx {
    margin:auto;
    text-align: left;
    width:1020px;
    min-height: 30px;
    background-color: White;
    display:block;
 }

 .btn-styleLT{
    border : solid 2px #170417;
    border-radius : 20px 0px 0px 0px ;
    moz-border-radius : 0px 20px 0px 0px ;
    font-size : 16px;
    color : #f4f6f7;
    padding : 4px 18px;
    width: 422px;
    background : #000000;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#353535));
    background : -moz-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -webkit-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -o-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -ms-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : linear-gradient(top, #000000 0%, #1f3b08 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1a0d1a',GradientType=0 );
    min-height: 20px;
    max-height: inherit;
 }

 .btn-styleRT{
    border : solid 2px #170417;
    border-radius : 0px 20px 0px 0px ;
    ... <almost same content>
    min-height: 20px;
    max-height: inherit;
 }

 .btn-styleCT{
    border : solid 2px #170417;
    font-size : 16px;
    color : #f4f6f7;
    padding : 4px 18px;
    width:167px;
    background : #000000;
    ... <almost same content> 
    min-height: 20px;
    max-height: inherit;
 }

 .btn-styleLT:hover,
 .btn-styleLT:focus,
 .btn-styleLT:active,
 .btn-styleLT.active {
    color: #ffffff;
    background-color: #3276b1;
    border-color: #285e8e;
 }

 .btn-styleRT:hover,
  ... <same>
    border-color: #285e8e;
 }

 .btn-styleCT:hover,
 ... <same>
    border-color: #285e8e;
 }

Есть идеи? Я подумывал предоставить индивидуальный div для каждой кнопки, но, если есть работа без этого, это было бы здорово.

Ace Caserya 19 фев. 2014, в 07:09

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Jake · Accepted Answer · 2014-02-19T05-39-00.000Z

вам нужно использовать display: table и display: table-cell для достижения того, что вы хотите.

здесь jsfiddle: http://jsfiddle.net/vtajZ/293/

HTML:

<div class="parent">
    <div class="child"><button type="button" class="btn-styleLT">The quick brown fox jumped over the lazy rabbit because it is not paying attention to it mother who cried wolf. </button></div>
    <div class="child"><button type="button" class="btn-styleCT"> middle </button></div>
    <div class="child"><button type="button" class="btn-styleRT"> right </button></div>
</div>

CSS:

*{
    box-sizing:content-box;
}
.parent {
    display: table;
    position:relative;
}
.child {
    display: table-cell;
}

.btn-styleLT{
    border : solid 2px #170417;
    border-radius : 20px 0px 0px 0px ;
    moz-border-radius : 0px 20px 0px 0px ;
    font-size : 16px;
    color : #f4f6f7;
    padding : 4px 18px;
    width: 422px;
    background : #000000;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#353535));
    background : -moz-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -webkit-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -o-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -ms-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : linear-gradient(top, #000000 0%, #1f3b08 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1a0d1a',GradientType=0 );
    min-height: 20px;
    max-height: inherit;
 }

 .btn-styleRT{
    border : solid 2px #170417;
    border-radius : 0px 20px 0px 0px ;
    ... <almost same content>
    min-height: 20px;
    max-height: inherit;
 }

 .btn-styleCT{
    border : solid 2px #170417;
    font-size : 16px;
    color : #f4f6f7;
    padding : 4px 18px;
    width:167px;
    background : #000000;
    ... <almost same content> 
    min-height: 20px;
    max-height: inherit;
 }
.btn-styleCT,.btn-styleRT{
    height: 100%;
}
.btn-styleCT{
    position:relative;
    height:100%;
}
.parent button{
    margin:0px;
}

Да, это то, о чем я думал, когда сказал: «Я думал предоставить индивидуальный div для каждой кнопки». Надеюсь, вы не возражаете, если я подожду еще несколько дней, чтобы посмотреть, что могут предложить другие, возможно, без дел.
Вы можете легко сделать то же самое без дополнительных элементов div, установив для самих кнопок «display: table-cell» и «vertical-align: middle», вот jsfiddle: jsfiddle.net/vtajZ/295
Получил это через индивидуальный div. Спасибо Большое.