【问题标题】：Aligning a child div's right/bottom in parent在父项中对齐子 div 的右/下
【发布时间】：2017-06-20 00:21:56
【问题描述】：

它是带有元素/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

使命：如画

【问题讨论】：

你好先生。 ts.tsgoo，此 html 代码适用于哪种样式，请提出您的问题，以便我给您正确的答案。
请添加有助于理解问题所在的完整代码。就像您的情况一样，任何人都知道您使用的是什么样式。
您为实现这一目标做了什么？你遇到了什么问题？或者您只是在寻找可以免费为您编码的人？

标签： css vertical-alignment right-align

【解决方案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>

【讨论】：

子 div 的顺序对我来说是不可改变的
你可以清楚的告诉我你的输出你需要哪种类型的输出
对我的结构性问题 Bhargav 表示歉意，感谢您的帮助

【解决方案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>

【讨论】：

【解决方案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 to container：

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

【讨论】：