css - 在父项中对齐子 div 的右/下

Question

它是带有元素/div（复选框组、文本字段、下拉菜单）的项目表单。元素一一出现。如果用户初始（选择或输入值）当前元素被验证并添加到包装容器。html示例如下：

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <!-- more divs -->
</div>

我的问题：

• 子 div 更复杂
• 顺序是不可改变的
• div 的大小是动态的，在 1-20 之间
• 列数 4 只是例如实际上取决于包装器 div 宽度，在 1-8 之间
• 没有使用 JavaScript

使命：如画

Answer 1

如果您有固定数量的 div 并像上面那样显示

所以下面的代码会帮助你

#wrapper div{
		border: 1px solid #ddd;
	    float: right;
	    margin: 5px;
	    padding: 30px;
	    font-weight: bold;
	    font-size: xx-large;
	}

	#wrapper
	{
		border: none;
		position: absolute;
		bottom: 0px;
		right: 0px;
	}

<div id="wrapper">
    
    <div>2</div>
    <div>1</div>
    <div style="clear: right;">6</div>
    <div>5</div>
    <div>4</div>
    <div>3</div>
</div>

Answer 2

这可以通过使用一点 JavaScript 和 CSS-flex 来完成。

function reverse(elem){
  for (var i=0; i < elem.childNodes.length; i++) 
    elem.insertBefore(elem.childNodes[i], elem.firstChild);

}
reverse(document.getElementById('wrapper'))

#wrapper {
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  direction: rtl;
}

看看它的实际效果：

function reverse(elem){
  for (var i=0; i < elem.childNodes.length; i++) 
    elem.insertBefore(elem.childNodes[i], elem.firstChild);

}
reverse(document.getElementById('wrapper'))

#wrapper {
  /* the important bit */
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  direction: rtl;
  
  /* styling */
  height: 200px;
  width: 200px;
  border: 1px solid;
}

#wrapper div {
  /* styling */
  border: 1px solid;
  padding: 20px;
}

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

改进

JavaScript 仅反转元素的顺序。如果您自己添加孩子，则相反添加它们并省略 JavaScript。这看起来会更好，就像这样：

#wrapper {
  /* the important bit */
  display: flex;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  direction: rtl;
  
  /* styling */
  height: 200px;
  width: 200px;
  border: 1px solid;
}

#wrapper div {
  /* styling */
  border: 1px solid;
  padding: 20px;
}

<div id="wrapper">
    <div>6</div>
    <div>5</div>
    <div>4</div>
    <div>3</div>
    <div>2</div>
    <div>1</div>
</div>

Answer 3

你可以像这样使用float和transform：

* {
  box-sizing: border-box;
}

#wrapper {
  transform:rotate(180deg); /* Rotate container 180 degree */
  width: 350px;
  height: 350px;
  border: 1px solid black;
}

#wrapper > div {
  transform:rotate(180deg); /* Rotate item 180 degree to display normal */
  float: left;
  width: 25%;
  height: 80px; 
  padding: 20px;
  border: 1px solid red;
}

<div id="wrapper">
  <div>7</div>
  <div>6</div>
  <div>5</div>
  <div>4</div>
  <div>3</div>
  <div>2</div>
  <div>1</div>
</div>

但是顺序颠倒了。因此，如果您有更多项目，只需将它们添加到容器的开头即可。

如果您不想使用float，可以使用display: flex容器：

display: flex;
flex-wrap: wrap;
align-content: flex-start;