0
我比較新的編碼場景在這裏，我試圖在CodePen上創建一支筆。基本上，我想在屏幕的兩側都有兩個div來充當「菜單」，然後當你點擊一個最終會在這些div菜單內的div時，我將使用jquery在屏幕中間顯示信息。內聯塊divs搞亂浮動和divs裏面他們
不幸的是，我一直在努力讓「菜單」div取得文本，同時保持在一起。我已經嘗試了一些東西，而且我似乎無法獲得div內的文本，有時我會在嘗試獲取文本的同時弄亂定位。
我現在已經到了我有兩個「菜單」div的地方，我想要他們，但我似乎無法向他們添加文本。我甚至不完全確定我是如何把它們拿到那裏的，整個內聯塊和浮動的東西在一分鐘之後就把我絆倒了。
如果有人能告訴我如何有一些div /文本，以這些div沒有搞亂自己的定位，將是巨大的:)
http://codepen.io/EoinTrainor11/pen/ojabxR
HTML：
<div class="names_experiment">
<div id="hero_names_experiment"></div>
<div id="hero_names"><h1>Test1<h1></div>
<div id="villain_names_experiment"></div>
<div id="villain_names"><h1>Test2</h1></div>
</div>
CSS：
#hero_names_experiment {
height: 740px;
width: 30%;
background-color: red;
display: inline-block;
margin-left: 30px;
opacity: 0.75;
positon: relative;
}
#villain_names_experiment {
height: 740px;
width: 30%;
background-color: yellow;
float: right;
margin-right: 16px;
opacity: 0.75;
position: relative;
}
.names_experiment {
}
#hero_names {
color: white;
position: absolute;
}
#villian_names {
position: absolute;
}
謝謝