Question

我对这里的编码场景比较陌生，我试图在CodePen上创建一支笔。基本上，我希望在屏幕的每一侧都有两个div作为＆＃34;菜单＆＃34;当你点击最终将在这些div菜单中的div时，我将使用jquery在屏幕中间显示信息。

不幸的是，我正在努力获得＆＃34;菜单＆＃34; div在一起排队时获取文本。我已经尝试了一些东西，而且我似乎无法将文本放入div中，有时我会在我试图获取文本内部时弄乱定位。

我现在已经达到了我有两个＆＃34;菜单＆＃34;我希望他们在哪里，但我似乎无法向他们添加文字。我甚至都不确定我是怎么把它们拿到那里的，整个内联块和浮动的东西都让我感到很沮丧。

如果有人能告诉我如何为这些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;
}

由于

Answer 1

我刚刚将<p>个标签添加到hero_names_experiment＆amp; 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

内联块div与它们内部的浮动和div混乱

1 个答案: