用css重新排列HTML元素

Question

我的布局中有三个元素，如下所示：

<div id="container">
    <div id="element1"/>
    <div id="element2"/>
    <div id="element3"/>
</div>

显示方式：

| element1 | element2 | element3 |

我希望他们这样显示：

element1 | element2
element3 |

我所做的最接近的事情是：

element1 |
element3 | element2

我无法实现元素1和元素2 的对齐

有人知道如何只使用CSS吗？

Answer 1

以下是的工作示例

<div id="container">
    <div id="element1" class="boxes">
    This is elem1
    </div>
    <div id="element2" class="boxes">
    This is the elem2
    </div>
    <div id="element3">
    This is elem3
    </div>
</div>
<style>
    .boxes{
        border:1px solid black;
        box-sizing:border-box;
        width:50%;
        float:left;
    }
</style>

Answer 2

这就是如何使用div标签：

<div class="exampleclass">Example Text</div>

Sören Kuklau的一个例子可以在这里看到下面是一个使用float: left css属性

Answer 3

您的问题是开放式的（没有任何上下文），有一个非常简单的解决方案，那就是使用float: left。。。

#element1, #element2, #element3 {
  float: left;
  width: 50%;
  box-sizing: border-box; // <- Not necessary for this basic example unless you add padding, etc.
}

<div id="container">
    <div id="element1">El 1</div>
    <div id="element2">El 2</div>
    <div id="element3">El 3</div>
</div>

Answer 4

将它们全部定义为float: left，并将clear: both添加到第三个。

Answer 5

 <div id="container">
    <div id="element1">El 1</div>
    <div id="element2">El 2</div>
    <div id="element3">El 3</div>
</div>


#container > div {
 float: left;
}
#container{
 position:relative;
}
#element3{ 
 bottom: -40px;
 display: block;
 position: absolute;
}

在我的解释中，#container #element3和#container > div是div的id，所以请不要作为注释阅读，感谢

Answer 6

你不能只使用CSS，因为CSS不能进行真正的DOM修改，所以你必须使用jQuery。

我希望这个链接能帮助你：

订购<UL><OL>在jQuery中？