Css 如何把div放在角落里

我有一个高度跨越两行的div。但我想将以下div放入左下角和右下角：

在浏览之前，请将拆分器向左拖动，您将看到复选框2和“2222”可以完美地安装在左下角和右下角

我可以使用相对位置（.VerticalUp类）。但问题是它会在下面留下一个空行，这是我不想要的

---

有什么想法吗？

如果你想让血液科浮动，你有两个会引起冲突。如果您更改.hemology{float:right；}，这将使产前内容正确浮动…使所有内容都适合…

尝试使用位置浮动。

---

我是新来的。没有太多经验。：）

嘿，现在像这样更改您的代码，因为您的代码很难，我已经创建了新代码，请检查它。并根据设计实施您的项目

Css代码

.top, .bottom{
list-style:none;
    color:#fff;
}


.top li, .bottom li{
    display:inline-block;
    background:green;
    width:33%;
    vertical-align: top;
    border-top:solid 10px red;
}
p{
    display:inline-block;
    vertical-align: top;
}

.bottom {
position:absolute;
    left:0;
    right:0;
    bottom:0;
}

.bottom li:last-child{
float:right;
}

<ul class="top">
        <li>
        <input type="checkbox">
            <p>first Check box</p>
        </li>
        <li>
        <input type="checkbox">
            <p>Second Check box</p>
        </li>
        <li>
            <p>finel box</p>
        </li>
    </ul>


<ul class="bottom">
        <li>
        <input type="checkbox">
            <p>first Check box</p>
        </li>
        <li>
            <p>finel box</p>
        </li>
    </ul>

HTML代码

.top, .bottom{
list-style:none;
    color:#fff;
}


.top li, .bottom li{
    display:inline-block;
    background:green;
    width:33%;
    vertical-align: top;
    border-top:solid 10px red;
}
p{
    display:inline-block;
    vertical-align: top;
}

.bottom {
position:absolute;
    left:0;
    right:0;
    bottom:0;
}

.bottom li:last-child{
float:right;
}

<ul class="top">
        <li>
        <input type="checkbox">
            <p>first Check box</p>
        </li>
        <li>
        <input type="checkbox">
            <p>Second Check box</p>
        </li>
        <li>
            <p>finel box</p>
        </li>
    </ul>


<ul class="bottom">
        <li>
        <input type="checkbox">
            <p>first Check box</p>
        </li>
        <li>
            <p>finel box</p>
        </li>
    </ul>

第一个复选框



第二个复选框



风箱





第一个复选框



风箱

---

现场演示

只是一个提示，您不会在

标签上放置

id的

。您希望在左下角和右下角放置哪个div？具体点我想把复选框2和“2222222”放在左下角和右下角。我想我没说清楚。我不想第二排坐在屏幕的底部。问题是R1C2，文本太长，跨2行。我希望R2C1和R2C2正好适合R1C2的突出部分。但它不能跨浏览器兼容。即使分辨率不兼容