CSS divs浮动 - 移动div

Question

拜托，你能帮我浮动div吗？我有这个div的html结构： http://pastebin.com/sBLbfTv1我想用div下的按钮移动div与类别......就像在图像上一样。

截图：

这是css文件：http://pastebin.com/CC4umrgH

请帮忙。谢谢！

Answer 1

这是您想要的结构的 DEMO 。

HTML：

<div class="cont">
    <div class="c1">
    </div>
    <div class="c2">
    </div>
</div>
<div class="cont">
    <div class="c3">
    </div>
    <div class="c4">
    </div>
</div>

CSS：

.cont{
    float: left;
}
.c1{
    background-color: red;
    height: 100px;
    width: 100px;
}
.c2{
    background-color: green;
    height: 100px;
    width: 100px;
}
.c3{
    background-color: blue;
    height: 50px;
    width: 100px;
}
.c4{
    background-color: black;
    height: 20px;
    width: 100px;
}

另一个选项是将右下角div的位置设置为绝对值：

position: absolute;
top: 100px;
right: 0px;

<强> Your HTML code with new CSS

我假设您的右上方div高度是固定的（在示例中为100px）。但这是不好的做法，你应该避免它，并找到一种方法来控制你的HTML结构。

Answer 2

你可以使用两个div作为浮动列。 然后只需在每列中输入您想要的内容：

<form>
    <div class="leftColumn">
        <div class="fieldsetMain main"></div>
        <div class="fieldstMain minor"></div>
    </div>
    <div class="rightColumn">
        <div class="fieldsetMain main"></div>
        <div class="fieldstMain minor"></div>
    </div>
</form>

CSS必须是：

.leftColumn { float: left; width: 80%; }
.rightColumn { float: left; width: 20%; }
.leftColumn fielsetMain, .rightColumnfieldsetMain { position: relative; }