[英]Align content of div vertically in line, under button
我有这个设置的jsfiddle我需要Points
一下之后出现的Button 2
( Point 3
, Point 4
下) Button 2
,而不是下Button 1
。
我该怎么做?
var myButton = document.getElementById("myButton"); var dropdDown = document.getElementById("dropdown"); (function() { "use strict"; dropdownExpander(myButton, dropdDown); function dropdownExpander(bdropdown, dContent) { bdropdown.addEventListener("click", function(e) { e.preventDefault(); if (dContent.classList.contains("is-active") === true) { dContent.classList.remove("is-active"); } else { dContent.classList.add("is-active"); } }); } })(); var myButton = document.getElementById("myButton2"); var dropdDown = document.getElementById("dropdown2"); (function() { "use strict"; dropdownExpander(myButton, dropdDown); function dropdownExpander(bdropdown, dContent) { bdropdown.addEventListener("click", function(e) { e.preventDefault(); if (dContent.classList.contains("is-active") === true) { dContent.classList.remove("is-active"); } else { dContent.classList.add("is-active"); } }); } })();
.parentDiv { display: inline-blick; } #myButton { padding: 5px; } .childDiv { display: none; position: absolute; padding-right: 5px; } .childDiv.is-active { display: block; }
<div class="parentDiv"> <button type="button" id="myButton">Button 1</button> <div class="childDiv" , id="dropdown"> <div class="cont">Point 1</div> <div class="cont">Point 2</div> </div> <button type="button" id="myButton2">Button 2</button> <div class="childDiv" , id="dropdown2"> <div class="cont">Point 3</div> <div class="cont">Point 4</div> </div> </div>
使用此代码
<div class = "parentDiv">
<div style='float:left'>
<button type="button" id = "myButton">Button 1</button>
<div class = "childDiv", id = "dropdown">
<div class = "cont"> Point 1</div>
<div class = "cont"> Point 2</div>
</div>
</div>
<div style='float:left'>
<button type="button" id = "myButton2">Button 2</button>
<div class = "childDiv", id = "dropdown2">
<div class = "cont"> Point 3</div>
<div class = "cont"> Point 4</div>
</div>
</div>
</div>
将每个Button + Dropdown包裹在.parentDiv
。
更正了inline-blick
。
新增position: relative;
HTML:
<div class="parentDiv">
<button type="button" id="myButton">Button 1</button>
<div class="childDiv" , id="dropdown">
<div class="cont"> Point 1</div>
<div class="cont"> Point 2</div>
</div>
</div>
<div class="parentDiv">
<button type="button" id="myButton2">Button 2</button>
<div class="childDiv" , id="dropdown2">
<div class="cont"> Point 3</div>
<div class="cont"> Point 4</div>
</div>
</div>
CSS:
.parentDiv {
display: inline-block;
position: relative;
}
这是使用flexbox进行布局的解决方案:
codepen: http ://codepen.io/anon/pen/LRLQoV
<div class="flex-container">
<div class='flex-column'>
<button type="button" id="button1">Button 1</button>
<div class="childDiv hidden" , id="dropdown1">
<div class="cont"> Point 1</div>
<div class="cont"> Point 2</div>
</div>
</div>
<div class='flex-column'>
<button type="button" id="button2">Button 2</button>
<div class="childDiv" id="dropdown2">
<div class="cont"> Point 3</div>
<div class="cont"> Point 4</div>
</div>
</div>
<button id='reset'>Reset</button>
</div>
CSS:
.flex-container {
display: flex;
}
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
}
.hidden {
display: none;
}
#reset {
margin-left: auto;
color: white;
background: red;
}
javascript:
(() => {
const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
const element1 = document.getElementById('dropdown1');
const element2 = document.getElementById('dropdown2');
const resetButton = document.getElementById('reset');
button1.onclick = () => {
element1.classList.remove('hidden');
}
button2.onclick = () => {
element2.classList.remove('hidden');
}
resetButton.onclick = () => {
element1.classList.add('hidden');
element2.classList.add('hidden');
}
})();
使用HTML <table>
<table>
<tr>
<td>
<button type="button" id = "myButton">Button 1</button>
<div class = "childDiv", id = "dropdown">
<div class = "cont"> Point 1</div>
<div class = "cont"> Point 2</div>
</div>
</td>
<td>
<button type="button" id = "myButton2">Button 2</button>
<div class = "childDiv", id = "dropdown2">
<div class = "cont"> Point 3</div>
<div class = "cont"> Point 4</div>
</div>
</td>
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.