如何强制忽略div？

Question

我是CSS的新人，正在阅读教程等等。一切都很好 - 但我仍然坚持下面的小设计。我试图让布局忽略带有时间戳的水平框，我已经尝试了所有东西 - 浮动，位置绝对，相对，边距等等。此时我只是在没有线索的情况下抛出标签。

我想要完成的是垂直红框 - “引导线”通过忽略“时间戳”框连接到下面的大框。也许我的HTML结构很糟糕，这让我更难实现这个目标？

这可能很简单。我也一直在与图像周围的不均匀边缘搏斗，但这不太重要。

“Leader line”属于“vAxis”类。 “timeStamp”块是“timeLabel”类。

如果下面的代码段不清楚，我制作了codePen。

更新

我刚才意识到我没有 试图忽略带有时间戳的div。我可以让它使用border-left继续绘制垂直。不知道这是否意味着我聪明，黑客或只是采用“CSS”思维方式。我无法使用绝对值的原因是因为我希望将此代码用于Vis.js时间轴中的多个组件 - 并且它们的垂直位置会有所不同。

我已更新codepen

原始问题：

body {
  background-color: #000;
}
.hAxis {
  width: 100%;
  height: 10px;
  border-bottom: 4px solid #ffffff;
}
.outsideDiv {
  position: absolute;
  left: 220px;
}
.vAxis {
  width: 50px;
  height: 100px;
  outline: 1px solid red;
  border-left: 6px solid rgba(255, 255, 255, .5);
  ;
}
.box-4 {
  background-color: #011c21;
  background: -webkit-linear-gradient(90deg, #1A333D 0%, #030506 100%);
  border: 6px solid rgba(255, 255, 255, .5);
  width: 330px;
  padding: 6px;
}
.box-4:hover {
  border: 6px solid rgb(255, 255, 255);
}
.box-4:active {
  border: 6px solid rgb(255, 255, 0);
}
.imageDiv {
  box-align: center;
  display: inline-block;
  margin-left: 5px;
  margin-right: auto;
}
img {
  outline: 1px solid #000;
}
.timeLabel {
  color: #D0D1D9;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 2px;
  text-align: right;
  text-shadow: rgb(13, 52, 181) 6px 6px 10px;
  outline: 1px solid red;
  margin-left: 100px;
  width: 250px;
}
.narrative {
  color: #cccccc;
  font-size: 24px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  position: relative;
  padding: 10px;
  /*   text-shadow: rgb(77, 100, 176) 0px 2px 2px; */
}
html {
  height: 100%;
}
body {
  background-color: #0e1c21;
  /* IE9, iOS 3.2+ */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMxYzM3NDIiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, rgb(0, 0, 0)), color-stop(1, rgb(28, 55, 66)));
  /* Android 2.3 */
  background-image: -webkit-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(28, 55, 66) 100%);
  /* IE10+ */
  background-image: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(28, 55, 66) 100%);
}
}

<div class="hAxis"></div>

<div class="outsideDiv">
  <div class="vAxis"></div>
  <div class="timeLabel">04:35:27</div>
  <div class="box-4">
    <div class="imageDiv">
      <img src="http://placehold.it/320x240/0000ff/000000" width='320' height='240' />
    </div>

  </div>
  <div class="narrative">Cras sit amet maximus at libero, at vehicula justo. Cras sit amet maximus libero, at.
  </div>
</div>

Answer 1

添加position：absolute可以通过在box4上覆盖timelabel来解决问题 但试试吧 边距：-42px; 在timelabel课程中，也许这就是你需要的答案：）

Answer 2

将display: none添加到.vAxis这完全隐藏了这个DIV（我想你的意思是＆＃34;忽略＆＃34;？）

http://codepen.io/anon/pen/JEOwVo?editors=1100

Answer 3

在您的codepen演示中，红色垂直框已触及下方的蓝色框。所以我猜你已经解决了这个问题。

关于图像周围的不均匀边缘，有几个因素在起作用：

（1）您已在祖先容器上设置宽度，使其比图像长：

.box-4 {
    background-color: #011c21;
    background: -webkit-linear-gradient(90deg, #1A333D 0%, #030506 100%);
    border: 6px solid rgba(255, 255, 255, .5);
    width: 330px;  <--- REMOVE THIS
    padding: 6px;
}

（2）您在直接容器上设置了不均匀的边距。甚至他们出去了。

.imageDiv {
    box-align: center;
    display: inline-block;
    margin-left: 5px; <--- REMOVE THIS, AND..
    margin-right: auto; <--- THIS
    margin: 5px; <-- NEW
}

（3）图像是内联级元素，因此默认设置为vertical-align: baseline。这会将其提升到容器内。覆盖默认值：

img {
    outline: 1px solid #000;
    vertical-align: bottom; <--- NEW
}

revised codepen