0

我正在努力提高我的 CSS 技能，但遇到了一些麻烦。我想在同一行上对齐 3 个 DIV，从容器 div 的顶部开始。我能够让它们水平对齐，但它们没有显示在顶部。似乎它们都与我无法弄清楚的底部对齐。谁能指出我正确的方向，如何使 div 没有边距和（浮动？）到顶部？

我尝试宣布利润，但运气不佳。此外，这将通过 MVC 在局部视图中显示，因此将容器设置为绝对可能不是一个选项，因为它距页面顶部的高度会发生变化。

这是一个JFIDDLE，我还附上了我的代码，包括 HTML 和 CSS，以及在我的浏览器中呈现的内容。

谢谢！

HTML：

<fieldset>
<legend>Items</legend>
 <div class="outercontainer" id="top">
    <div class="containera">
      <div class="group-title">
        <input type="checkbox" runat="server" />
      </div>
        <div class="left item">Left Content</div>
        <div class="center item">Center Content</div>
        <div class="right item">Right Content</div>
    </div>
</div>
<div class="outercontainer" id="bottom">
  <div class="containera">
      <div class="group-title">
        <input type="checkbox" runat="server" />
      </div>
      <div class="left item">Left Content</div>
      <div class="center item">Center Content</div>
      <div class="right item">Right Content</div>
  </div>
</div>
</fieldset>

CSS：

#top {
    border: 3px solid green;
}
#bottom {
    border: 3px solid blue;
}
.item {
    position:relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin:0;
    top:0;
    width: 32%;
    color: white;
}
.left {
    background:red;
}
.right {
    background:blue;
}
.center {
    background:green;
}
    .containera {
    text-align: center;
    white-space: nowrap;
}
    .group-title {
    text-align:center;
    font-weight:bold;
    font-size:larger;
}
.group-title2 {
text-align:center;
width:100%;
}

以下是正在渲染的内容：

实际显示的是什么

4

2 回答 2

1

这是因为您的复选框。只需将它们放在三个内容 div 之后。

<div class="containera">

    <div class="left item">Left Content</div>
    <div class="center item">Center Content</div>
    <div class="right item">Right Content</div>
    <div class="group-title">
        <input type="checkbox" runat="server" />
    </div>
</div>
于 2013-11-07T17:38:26.530 回答
0

你必须有其他事情发生，因为当我修改你的小提琴以使项目 div 具有不同的高度时，它们会按照你想要的方式排列。您所描述的内容听起来也像是默认行为，因此我不确定您为什么会看到它们都像这样与底部对齐。这是我修改的部分，这只是为了看看他们的行为：

.left {
    background:red; height:50px;
}
.right {
    background:blue; height:70px;
}
.center {
    background:green; height: 30px;
}

见这里：更新的小提琴

于 2013-11-07T17:37:46.807 回答