你怎么能用纯CSS来改变div的孩子的顺序呢？
例如：
我想要
<div id="parent">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
显示为：
D
C
B
A
我在JSfiddle上创建了一个演示： http://jsfiddle.net/E7cVs/2/
答案 0 :(得分：67)
现代答案是
#parent {
display: flex;
flex-direction: column-reverse;
}
答案 1 :(得分：18)
有点棘手，但可以工作;只是为了给你一个想法：
div#top-to-bottom {
position: absolute;
width:50px;
text-align: left;
float: left;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
div#top-to-bottom > div {
width: 50px;
height: 50px;
position: relative;
float: right;
display: block;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
在容器和孩子的垂直轴上镜像。 孩子们沿着容器的倒y轴，但是孩子们自己再次抬头。
答案 2 :(得分：9)
<style>
#parent{
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
</style>
答案 3 :(得分：7)
仅CSS解决方案：（我将所有选择器切换到类选择器，以便不处理可能发生的特殊问题。只是我和其他人的习惯。我也删除了与之无关的样式例子。）
.top-to-bottom {
position: absolute;
}
.child {
width: 50px;
height: 50px;
margin-top: -100px; /* height * 2 */
}
.child:nth-child(1) {
margin-top: 150px; /* height * ( num of childs -1 ) */
}
.a {
background:blue;
}
.b {
background:red;
}
.c {
background:purple;
}
.d {
background:green;
}
演示： http://jsfiddle.net/zA4Ee/3/
Javascript解决方案：
var parent = document.getElementsByClassName('top-to-bottom')[0],
divs = parent.children,
i = divs.length - 1;
for (; i--;) {
parent.appendChild(divs[i])
}
答案 4 :(得分：4)
你可以用纯CSS做到这一点，但有一些重要的警告。尝试使用以下方法之一，但两者都有所背叛：
右浮动将反转它们水平显示的顺序。 Here's a jsFiddle demo
<div id="parent">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
#parent div {
float: right;
}
绝对位置将打破正常文档流中的元素，并允许您根据您的选择进行精确定位。这是a fiddle demo。
答案 5 :(得分：1)
这是一个更简单，更便携，完全前缀的@vals答案。请注意，截至2017年2月，CSS3 2D Transforms仅获得94％的支持。
.reverse, .reverse>* {
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}<div class="reverse">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>
答案 6 :(得分：0)
display：table-header-group; display：table-footer-group;
儿童
display：table;
为父母
答案 7 :(得分：0)
根据此处其他位置提供的flex个答案，这里有一个完整的跨浏览器解决方案Autoprefixer：
#parent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
答案 8 :(得分：0)
这是另一种简单的现代方式。请享用！
#parent{
/* Just set display flex to parent div */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
/* Use this part if you need also a column direction */
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
/* This way you can decide the order of the internal divs */
#parent div:nth-child(1){
-webkit-order: 4;
-ms-order: 4;
order: 4;
}
#parent div:nth-child(2){
-webkit-order: 3;
-ms-order: 3;
order: 3;
}
#parent div:nth-child(3){
-webkit-order: 2;
-ms-order: 2;
order: 2;
}
#parent div:nth-child(4){
-webkit-order: 1;
-ms-order: 1;
order: 1;
}
<div id="parent">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
答案 9 :(得分：0)
100％使用此代码：
$sql=sprintf("SELECT * FROM rostosativos_invoice where id_proposta = '".$_GET['id']."';");
$res=mysqli_query($link, $sql);
while ($r=mysqli_fetch_assoc($res)){
// produto = posição 5
// quantidade = posição 7
// precouni = posição 6
// soma = posição 9
//multicell
$cellWidth=120;//tamanho da cell
$cellHeight=6.5;//altura da cell
//verificar se o texto passa a cell
if($pdf->GetStringWidth($r['produto']) < $cellWidth){
//se não, não fazer nada
$line=1;
}else{
//~se estiver, ~então calcular a altura necessária para a cobrir a cell
//ao dividir o texto para ajustar ao tamanho da cell
//~depois contar quantas linhas são necessãrias para ajustar o texto na cell
$textLength=strlen($r['produto']); //total text length
$errMargin=10; //cell com margem de erro, just in case
$startChar=0; //posição inicial para cada linha
$maxChar=0; //Máxima caracteres numa linha, para incremetar mais tarde
$textArray=array(); //Guardar as strings em cada linha
$tmpString=""; //Guardar a string numa linha temporária
while($startChar < $textLength){ //loop até ao fim do texto
//loop até chegar ao máximo de caracteres
while(
$pdf->GetStringWidth( $tmpString ) < ($cellWidth-$errMargin) &&
($startChar+$maxChar) < $textLength ) {
$maxChar++;
$tmpString=substr($r['produto'],$startChar,$maxChar);
}
//mover startChar para a próxima linha
$startChar=$startChar+$maxChar;
//depois adicionar para o array para saber quantas linhas serão necessárias
array_push($textArray,$tmpString);
//reset maxChar e tmpString
$maxChar=0;
$tmpString='';
}
//receber o numero de linhas
$line=count($textArray);
}
//usar MultiCell em vez de Cell
//mas primeiro, como a MultiCell é sempre tratada como fim de linha, precisamos de
//definir manualmente a posição xy para a próxima cell ficar ao lado.
//guardar a posição x e y antes de escrever a multicell
$xPos=$pdf->GetX();
$yPos=$pdf->GetY();
$pdf->MultiCell($cellWidth,$cellHeight,$r['produto'],1,'L');
//receber a posição para a próxima cell ao lado da multicell
//e equilibrar o x com o tamanho da multicell
$pdf->SetXY($xPos + $cellWidth , $yPos);
//escrever as cells
$pdf->Cell(15,($line * $cellHeight),$r['quantidade'],1,0); //adaptar a altura ao número de linhas
$pdf->Cell(10,($line * $cellHeight),'UNI',1,0); //adaptar a altura ao número de linhas
$pdf->Cell(25,($line * $cellHeight),$r['precouni'].chr(128),1,0); //adaptar a altura ao número de linhas
$pdf->Cell(25,($line * $cellHeight),$r['soma'].chr(128),1,1); //adaptar a altura ao número de linhas
}
答案 10 :(得分：-3)
使用绝对定位和左上角