Предотвращение перекрытия кнопок

Это моя структура div. У меня возникают трудности с достижением следующего.Предотвращение перекрытия кнопок

Как я могу сделать все 3 кнопки (Sub 1, Sub 2, Sub 3) видимыми и сделать высоту DIV 1 до высоты его кнопок детей?

HTML:

.sub { 
 
    position: relative; 
 
    background-color: lime; 
 
} 
 
.itmHolder { 
 
    position: relative; 
 
} 
 
.Buttons { 
 
    display: inline-block; 
 
    padding: 12px 8px; 
 
} 
 
.itmHolder:nth-child(2), 
 
.itmHolder:nth-child(3) { 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.og { 
 
    margin-top: 15px; 
 
    position: relative; 
 
    text-align: center; 
 
}

<div class="og"> 
 
    <div class="itmHolder"> 
 
    <div class="sub">DIV 1</div> 
 
    <div class="sub">DIV 2</div> 
 
    <div class="sub"> 
 
     <button type="button" class="Buttons">Sub 1</button> 
 
     <button type="button" class="Buttons">Sub 2</button> 
 
     <button type="button" class="Buttons">Sub 3</button> 
 
    </div> 
 
    </div> 
 
    <div class="itmHolder"> 
 
    <button type="button" class="normalBtn">Button</button> 
 
    </div> 
 
</div>

Ожидаемый результат:

enter image description here

источник

2015-05-07 Fergoso

фактически Div1 не имеет детей. Вы уверены в этой структуре? Выглядит действительно странно – smnbbrv

Используйте 'display: inline-block;' на '.sub' для начала. Я не уверен, почему у вас есть «div 1» и «div 2», когда в ожидаемом исходе нет таких элементов. – jbutler483

@ jbutler483 Зачем использовать 'display: inline-block;' on '.sub' ?? – Fergoso

хорошо я удалил устаревшие элементы и определения CSS и теперь он выглядит точно так же, как на картинке:

.sub { 
 
    position: relative; 
 
    background-color: lime; 
 
    overflow: hidden; 
 
} 
 
.itmHolder { 
 
    position: relative; 
 
} 
 
.Buttons { 
 
    display: inline-block; 
 
    padding: 12px 8px; 
 
} 
 
.og { 
 
    margin-top: 15px; 
 
    position: relative; 
 
    text-align: center; 
 
}

<div class="row"> 
 
    <div class="og"> 
 
    <div class="itmHolder"> 
 
     <div class="sub"> 
 
     <button type="button" class="Buttons">Sub 1</button> 
 
     <button type="button" class="Buttons">Sub 2</button> 
 
     <button type="button" class="Buttons">Sub 3</button> 
 
     </div> 
 
    </div> 
 
    <div class="itmHolder"> 
 
     <button type="button" class="normalBtn">Button</button> 
 
    </div> 
 
    </div> 
 
</div>

fiddle

источник

2015-05-07 12:53:22 smnbbrv

Ваша скрипка такая же Как мой. – Fergoso

извините ... в любом случае, просто примените код из ответа – smnbbrv

yep ... все хорошо. Благодарю. – Fergoso

Я сделал бы что-нибудь вроде этого

.wrapper { 
 
    width: 500px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 
.subs { 
 
    background-color: green; 
 
} 
 
.subs button { 
 
    height: 30px; 
 
}

<div class="wrapper"> 
 
    <div class="subs"> 
 
    <button>Sub1</button> 
 
    <button>Sub2</button> 
 
    <button>Sub3</button> 
 
    </div> 
 
    <button>Button</button> 
 
</div>

источник

2015-05-07 12:55:45

Согласно вашему ожидаемому выходу. This может вам помочь.

HTML

<div> 
<div class="parent"> 
    <button>SUB1</button> 
    <button>SUB2</button> 
    <button>SUB3</button> 
</div> 
<div> 
    <button>Button</button> 
</div> 
</div>

CSS

.parent { 
    background-color: lime; 
} 
div{ 
    text-align: center; 
} 
.parent button{ 
    margin: 0; 
    padding:0; 
    height: 55px; 
    width: 50px; 
}

источник

2015-05-07 12:55:50 sasi

Ваша скрипка такая же, как у меня. – Fergoso

вы Juste должны немного изменить ваш CSS:

.Buttons{ 
    display: inline-block; 
    padding: 1px 8px; 
    height: 100%; 
    line-height: 100%; 
} 
.itmHolder > :nth-child(2) , .itmHolder > :nth-child(3){ 
    position: absolute; 
    top:0; 
    width: 100%; 
}

https://jsfiddle.net/t5au23ra/7/

источник

2015-05-07 12:58:56 ekans

Ваша проблема и ваша разметка непонятна. Не знаете, почему вы использовали pos:abs. Если вы хотите, как в вашей фигуре, вам не нужно столько кодов. Посмотрите на это fiddle.

HTML

<div class="make-center"> 
    <div class="sub"> 
     <button type="button" class="Buttons">Sub 1</button> 
     <button type="button" class="Buttons">Sub 2</button> 
     <button type="button" class="Buttons">Sub 3</button> 
    </div> 
    <button type="button" class="normalBtn">Button</button> 
</div>

CSS

.make-center { 
    text-align: center; 
    padding: 20px 0; 
} 
.sub { 
    background: lime; 
} 
.normalBtn, 
.Buttons { 
    padding: 10px; 
    border: 1px solid gray; 
}

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

источник

2015-05-07 13:08:53

выглядит хорошо .. спасибо :) – Fergoso

я надеюсь, что вы хотите, как этот тип меню

<ul class="itmHolder"> 
      <li>DIV 1</li> 
      <li>DIV 2 
      <ul class="sub"> 
       <li> <button type="button" class="Buttons">Sub 1</button></li> 
       <li>   <button type="button" class="Buttons">Sub 2</button></li><li> 
       <button type="button" class="Buttons">Sub 3</button></li> 
       <button type="button" class="normalBtn">Button</button> 
      </ul> 
     </li> 

</ul>

Css

.itmHolder{ margin:0; padding:0;} 
.itmHolder li{ display:inline-block; position:relative;} 
.itmHolder li .sub{display:none; height:50px; background:lime; width:100%; position:absolute; width:500px;} 
.itmHolder li:hover .sub {display:block;} 
.itmHolder li:hover .sub button{height:50px; margin:0 2px;} 
.normalBtn{top:50px;margin-left:250px;position:absolute}

использовать это.

источник

2015-05-07 13:23:11

Удалить это из вашего CSS: Demo

.itmHolder :nth-child(2) , .itmHolder :nth-child(3){ 
    position: absolute; 
    top:0; 
}

источник

2015-05-08 04:10:30

Предотвращение перекрытия кнопок

ответ

Смежные вопросы