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

正如开发人员3466402所说，你并没有关闭半框右侧的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％，只要它们足够小以逃避它们一起使用的那些20px的增加宽度。

Answer 2

在您关联的页面中，我看到您忘记关闭ID name的{{1}}。我想这就是问题所在。

此外，您可以将"half-box-right"和width的{{1}}缩减为half-box-right，因为它们可以并排显示，而不是右边的左侧div。

带有悬停的两列

2 个答案: