如何将元素水平相邻放置？答案

【问题标题】：How to put elements next to each other horizontally?如何将元素水平相邻放置？
【发布时间】：2012-03-07 04:12:21
【问题描述】：

我有 7 个面板（每个面板都有另外 5 个面板），它们一起根据我的 C# 代码创建了某种动态表。如何让我的面板彼此水平放置？

我试过float:left;，但没用。

小组是这样的：

    <asp:Panel ID="Panel0"  CssClass = "evenCulomn" runat="server">
    </asp:Panel>
    <br />
    <asp:Panel ID="Panel1" CssClass = "oddCulomn" runat="server">
    </asp:Panel>
    <br />
    <asp:Panel ID="Panel2" CssClass = "evenCulomn"  runat="server">
    </asp:Panel>
    <br />
    <asp:Panel ID="Panel3"  CssClass = "evenCulomn" runat="server">
    </asp:Panel>
    <br />
    <asp:Panel ID="Panel4"  CssClass = "oddCulomn" runat="server">
    </asp:Panel>
    <br />
    <asp:Panel ID="Panel5" CssClass = "evenCulomn"  runat="server">
    </asp:Panel>
    <br />
    <asp:Panel ID="Panel6" CssClass = "oddCulomn"  runat="server">
    </asp:Panel>

【问题讨论】：

首先，删除<br /> 标签。然后，用另一个 <div style="overflow:hidden;"> 包装所有这些伪元素，然后将每一列（注意列的拼写）设置为 float:left 。
谢谢，我什至没看到那些
！这是一种魅力！

标签： c# html css css-float

【解决方案1】：

float:left 只要面板适合容器就可以工作。一旦容器的宽度被填满，它们就会包裹起来。

我认为你的问题是你的面板需要有一个固定的宽度 - 否则它们是 100% 宽并且会占用所有空间并且 float:left 被有效地忽略了。

类似这样的：

.evenCulomn .oddCulom
{
    float: left;
    width: 200px;
}

【讨论】：

显然它在没有宽度的情况下工作，但我认为如果我在不同的浏览器上尝试，我可能会遇到问题。所以无论如何我都会修复宽度。谢谢！

【解决方案2】：

.evenCulomn
{
 float:left
}
.oddCulomn
{
 float:left;
}

【讨论】：