内联块divs搞乱浮动和divs里面他们

我比较新的编码场景在这里，我试图在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; 
}

谢谢

来源

2015-11-07 Eoin Trainor

我刚刚将<p>标签添加到hero_names_experiment & villain_names _expirament您可以添加<a>标签或其他。

div id="poem"> 
     <p id="one_ring_to_rule_them_all"> One Ring to rule them all</p> 
     <p id="one_ring_to_find_them"> One Ring to find them</p> 
     <p id="one_ring_to_bring_them_all_and_in_the_darkness_bind_them">One Ring to bring them all and in the darkness bind them 
     </p> 
    </div> 

    <div id="heroes" class="type"> 
     <h1>Heroes</h1> 
    </div> 
    <div id="villains" class="type"> 
     <h1>Villains</h1> 
    </div> 

    <div class="names_experiment"> 
     <div id="hero_names_experiment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet tortor sit amet dui eleifend dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed varius eget purus ut hendrerit. Integer gravida lacus ut tempus bibendum. Mauris faucibus ex ut ante tincidunt bibendum. Suspendisse venenatis eros id justo sagittis, et pretium lacus faucibus. Nam tempus, massa eget aliquet varius, turpis enim commodo nulla, vitae rhoncus sem mauris at sapien. Integer dignissim nibh libero, at mollis ante luctus id. Cras in tristique arcu. Etiam scelerisque nec lacus ut ultrices. In sed libero in sapien congue pretium. Pellentesque at nisi purus. Sed dapibus eleifend diam a consectetur. Aliquam diam lectus, accumsan eu lacus ut, sollicitudin dapibus justo. Duis ullamcorper diam leo, vel molestie ex molestie nec. Aenean efficitur porta commodo. 
    Nunc faucibus dictum dign</div> 
     <div id="hero_names"><h1>Hello<h1></div> 
     <div id="villain_names_experiment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet tortor sit amet dui eleifend dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed varius eget purus ut hendrerit. Integer gravida lacus ut tempus bibendum. Mauris faucibus ex ut ante tincidunt bibendum. Suspendisse venenatis eros id justo sagittis, et pretium lacus faucibus. Nam tempus, massa eget aliquet varius, turpis enim commodo nulla, vitae rhoncus sem mauris at sapien. Integer dignissim nibh libero, at mollis ante luctus id. Cras in tristique arcu. Etiam scelerisque nec lacus ut ultrices. In sed libero in sapien congue pretium. Pellentesque at nisi purus. Sed dapibus eleifend diam a consectetur. Aliquam diam lectus, accumsan eu lacus ut, sollicitudin dapibus justo. Duis ullamcorper diam leo, vel molestie ex molestie nec. Aenean efficitur porta commodo. 

    Nunc faucibus dictum dign</div> 
      <div id="villain_names"><h1>Hello2</h1> 
      </div> 
    </div>

CODEPEN DEMO

来源

2015-11-07 00:34:24

内联块divs搞乱浮动和divs里面他们

回答

相关问题