防止按钮重叠

Question

这是我的div结构。我在实现以下方面遇到了困难。

如何使所有3个按钮（Sub 1，Sub 2，Sub 3）可见并使DIV 1的高度达到其子按钮的高度？

Fiddle

HTML：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

预期产出：

Answer 1

我删除了过时的元素和CSS定义，现在它看起来与图像完全相同：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

fiddle

Answer 2

我会做那样的事情

.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>

Answer 3

根据您的预期输出。 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;
}

Answer 4

你应该改变一下你的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/

Answer 5

您的问题和标记是不可理解的。不知道你为什么使用$(this).parents('.tabs').find('a.current').removeClass('current'); 属性。如果您想要如图所示，那么您不需要那么多代码。看看这个fiddle。

<强> HTML

pos:abs

<强> CSS

<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>

按钮之间的间距是由于默认按钮边框（浏览器的默认渲染）。

Answer 6

我希望你想要这种类型的菜单

<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}

使用它。

Answer 7

从您的css中移除此内容： Demo

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