Question

我如何为2个div块编写css（或任何其他方式）：

<div>first</div>
<div>second</div>

并在左侧获得第二个块，首先在右侧，但不能在html上更改此块的顺序有可能吗？

Answer 1

试试这个

<style>
.mainDiv
{
width:80%;
float:left;
border:#000 solid 1px;
padding:10px;
}
.divLeft
{
 width:49%;
 float:right;
 border:#000 solid 1px;
}
.divRight
{
width:49%;
margin-left:10px;
float:left;
border:#000 solid 1px;
}
</style>
<div class="mainDiv">
<div class="divLeft">
Left Div
</div>
<div class="divRight">
Right Divs
</div>
</div>

Answer 2

您应该为不同的div提供课程：

<div class="right">first</div>
<div class="left">second</div>

现在在你的css中你可以使用float属性来对齐你的div：

.right {
    float: right;
}
.left {
    float: left;
}

Answer 3

实际上，有很多方法这里有几个： DEMO

div  {
  margin:1em;
  border:solid 1px;
  background:gray;
}
div div {
  background:yellow;
}

#case1 {
  overflow:hidden;
}
#case1 :nth-child(1) {
  float:right;
}
#case1 :nth-child(2) {
  float:left;
}

#case2 {
  overflow:hidden;
}
#case2 :nth-child(1) {
  float:right;
}
#case2 :nth-child(2) {
  overflow:hidden
}

#case3 {
  direction:rtl;
  text-align:center;/* or whatever */
}
#case3 :nth-child(1) {
  display:inline-block;
  direction:ltr;/* reset back */
}
#case3 :nth-child(2) {
  display:inline-block;
  direction:ltr;/* reset back */
}
#case4 {
  direction:rtl;
  display:table;
  border-spacing:1em;
  border-collapse:separate;
  margin:1em auto;
}
#case4 :nth-child(1) {
  display:table-cell;  
  direction:ltr;/* reset back */
}
#case4 :nth-child(2) {
  display:table-cell;  
  direction:ltr;/* reset back */
}

#case5 {
  display:flex;
  flex-wrap:wrap;
}
#case5 :nth-child(1) {
  order:1;

}
#case5 :nth-child(2) {
/* nothing needed really */
}

#case6 {
text-align:center;
}
#case6 :nth-child(1) {
  display:inline-block;
  width:40%;
  position:relative;/* alternative to relative+ coordonates is transform:translate() ; */
  left:45%;

}
#case6 :nth-child(2) {
  display:inline-block;
  width:40%;
  position:relative;/* alternative to relative+ coordonates is transform:translate() ; */
  right:45%;
}

和其他人，只要避免任何使用绝对位置：）

html中的右侧块首先写入而不是左侧

3 个答案: