Question

我应该在同一级别上有2个列表，2 div中显示的数据来自数据库，并且是1到10行最大的变量

我的问题是如果第一个div有更多的线，第二个div会被取代如果他们有相同的行数，那就没关系

这就是我现在所拥有的

这是我的代码：

    while (p->next)…

Answer 1

看起来是因为左侧区块中的内容多于右侧区域。尝试对其使用*，如果失败，请转到vertical-align: top而不是float:left;

Answer 2

见https://jsfiddle.net/7abx2wLe/
对行中的每个div使用display: inline-block。

Answer 3

vertical-align:top

只需在div上设置{{1}}即可。

Answer 4

vertical-align:top;

会起作用，但是如果您希望两个div始终保持相同的高度，您可以将整个代码包装在显示中：flex;

像：

<div style="display:flex;">
<div style="width: 55%; display: inline-block; background-color: #aaffaa">
    <p style="
        transform: rotate(-90deg);
        width: 130px;
        height: 50px;
        float: left;
        background: gray;
        color: #fff;
        text-align: center;
        padding-left: 10px;
        padding-top: 15px;
        margin: 40px 0 0 -40px">  List1: {{  form.varList}}
    </p>

    <p>
        <span style="display: block;margin-left: 90px;  "> {{ form.var1 }}</span>
        <span style="display: block;margin-left: 90px;">  {{ form.var2 }}</span>
        <span style="display: block;margin-left: 90px; ">  {{ form.var3 }}</span>
        <span style="display: block;margin-left: 90px; "> {{ form.var4 }}</span>
        <span style="display: block;margin-left: 90px; ">  {{ form.var5 }}</span>
    </p>
</div>



<div style=" width: 40%; display: inline-block;background-color: #00CC33;  ">
    <p style="
        transform: rotate(-90deg);
        width: 130px;
        height: 50px;
        float: left;
        background: gray;
        color: #fff;
        text-align: center;
        padding-left: 10px;
        padding-top: 15px;
        margin: 40px 0 0 -40px">   Projects:{{.form.varprojects }}
    </p>

    <p>
        <span style="display: block;margin-left: 50px;"> {{ forme.var6 }} </span>
        <span style="display: block;margin-left: 50px;">  {{ form.var7}}</span>
        <span style="display: block;margin-left: 50px;">  {{ form.var8 }} </span>
        <span style="display: block;margin-left: 50px;">  {{ form.var9}}</span>
        <span style="display: block;margin-left: 50px;">  {{ form.var10 }} </span>
    </p>
</div>

两个div使用css不在同一级别

4 个答案: