Html 带悬停的两列

如何使两列区域中的内容正确排列？指向显示相关内容的页面。在我将两个div对齐之后，我将尝试添加在单列版本中看到的黄色箭头。到时候，这可能是另一个问题

这是CSS

#half-box-container {   
overflow:auto;
width: 100%
}

#half-box-left, #half-box-right {
  width: 50%; 
  margin:5px; 
  padding: 1em;
  -moz-box-shadow: -3px 3px 3px #cccccc;
  -webkit-box-shadow: -3px 3px 3px #cccccc;
  box-shadow: -3px 3px 3px #cccccc;
}

#half-box-left {   
  float:left; 
}
#half-box-right {   
  float:right; 
}

#half-box-content
{
    left: 30px;
    top: 0;
    color: #39275b;
    font-size: 100%;
}

这是我正在使用的HTML

<div id="half-box-container">
    <div id="half-box-left">
        <div id="triangle-right"></div>
        <div id="half-box-content">
        <h5>Left Headline</h5>
        Content goes here.
        </div>
    </div>
    <div id="half-box-right>
        <div id="triangle-right"></div>
        <div id="half-box-content">
        <h5>Right Headline</h5>
        Content goes here.
        </div>
    </div>
</div>

左标题
内容在这里。
查看您链接的页面，我看到您忘记关闭
“右半框”
的
ID name
。我想这就是问题所在

您还可以将
右半框
和
左半框
的
宽度减少到
38%
，因为它们并排放置，而不是左分区下面的右半框。
正如developer3466402所说，您没有关闭右半框的ID。此外，您不应该有两个ID相同的元素。浏览器只能正确地显示这些元素，并且每个ID只能有一个对象。请尝试为子元素使用类

它们不会在同一行上对齐的原因是，当您添加填充和边距时，它们添加的宽度超过了它们可以使用的宽度的100%，因此它们位于不同的行上。一个原因是他们使用的是
内容框
，这使得填充内容超出了框的范围。这就是你要做的：

#half-box-left, #half-box-right {
    width: 50%;
    padding: 1em;
    box-sizing:border-box;
    -moz-box-shadow: -3px 3px 3px #cccccc;
    -webkit-box-shadow: -3px 3px 3px #cccccc;
    box-shadow: -3px 3px 3px #cccccc;
}

这将把填充放在元素内部而不是外部。如果您不想删除元素的边距，您可以简单地将宽度设置为小于50%，前提是这些宽度足够小，可以避开它们一起使用的20像素的附加宽度。
刚刚注意到未闭合的元素。现在看来它起作用了。多谢@用户3491546如果此答案解决了您的问题，请不要忘记将其标记为已接受（单击左侧的灰色复选标记轮廓）！你到底想达到什么目的？问题出在哪里？你写下的下一个问题比写你的实际问题要多。