html - 带有悬停的两列

Question

如何让两列区域中的内容正确排列？ Here is a link到显示相关内容的页面。在我让两个 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>

Answer 1

正如developer3466402所说，你没有关闭half-box-right的ID。此外，您不应该有两个具有相同 ID 的元素。浏览器只能尽可能正确地显示它可以解释它，并且每个 id 应该只有一个对象。尝试为子元素使用类。

它们不会排在同一行的原因是当您添加填充和边距时，它们添加的宽度超过了它们可以使用的宽度的 100%，因此它们排在不同的行上。一个原因是他们正在使用 content-box box-model ，这使得填充在框外。这就是您要做的:

#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 像素的附加宽度。