Question

首先发布在这里。我会提供问题的照片。

您好！

我目前正在处理一个项目，其中我有2个div，应始终位于页面顶部。并排。那没问题。当我添加新的div时，会出现问题，这些div应该是并排的，但是在前2个之后。

前两个div的大小不同，如果前两个div中的第二个比第一个更短，那么我在这两个下添加的那些最终会处于奇怪的位置。

每个块都在自己的div中，每个div都在一个大的div中。希望你们能帮忙。

以下是课程：

    .panelLeft {
         width: 40%;
         float: left;
     }        

    .panel {
        background: #eee;
        padding: 20px;
        margin: 10px;
        border-radius: 7px;
        -webkit-box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
        -moz-box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
        box-shadow: 0px 9px 49px -23px rgba(0,0,0,0.54);
    }

    .displayNone {
        display: none;
    }

以下是一些示例代码：

<div>
        <div>
            <table>
                <tr>        
                    <td><asp:Linkbutton runat="server" ID="linkbutton1" Text="Toggle div1" OnClientClick="toggleDiv('divNr1'); return false;" />:</td>
                </tr>
                <tr>        
                    <td><asp:Linkbutton runat="server" ID="linkbutton2" Text="Toggle div2" OnClientClick="toggleDiv('divNr2'); return false;" />:</td>
                </tr>
            </table>
        </div>


        <div id="divNr1" class="panelLeft panel displayNone" runat="server">
            <table>
                <tr>
                    <td><asp:Literal runat="server" ID="someLiteral1" Text="Some text"/></td>
                </tr>  
            </table>
        </div>

        <div id="divNr2" class="panelLeft panel displayNone" runat="server">
            <table>
                <tr>
                    <td><asp:Literal runat="server" ID="someLiteral2" Text="Some text"/></td>
                </tr>   
            </table>
        </div>
     </div>

这是切换功能：

function toggleDiv(divName) {
    if (divName  === 'divNr1') {
            divNr1.toggle("fast");
        }
        else if (divName  === 'divNr2') {
            divNr2.toggle("fast");
        } 
    }

我会告诉你我对照片的意思：

我想要它是这样的：

非常感谢你！

Answer 1

将每行div包含在另一个div中。像这样：

<div>
  <div>left</div>
  <div>right</div>
</div>
<div>
  <div>left</div>
  <div>right</div>
</div>

等...

Answer 2

为你的div使用内联块，像这样;

UNSAFE

和这个CSS

<div id="div1"> Div 1</div>
<div id="div2"> Div 2</div>
<div id="div3"> Div 3</div>
<div id="div4"> Div 4</div>
<div id="div5"> Div 5</div>

body { font-size: 0; } div { width:45%; margin: 1px 2.5%; height: 100px; background: #ccc; display: inline-block; vertical-align: top; font-size: 20px; text-align: center; padding-top: 20px; } #div1 {height: 150px;}是为了让您的维度正常工作，但不要忘记重新放入字体大小。

https://codepen.io/chrispink/pen/EvxEoe

分开并排在一起

2 个答案: