在父母中对齐子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并且显示如上所述

以下代码可以帮助您

＆＃13;

＆＃13;

fs.readfilesync

＆＃13;

#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;
	}

＆＃13;

＆＃13;

＆＃13;

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;
}

看到它的实际效果：

＆＃13;

＆＃13;

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

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

改进

JavaScript只会颠倒元素的顺序。如果您自己添加子项，则反过来添加它们并省略JavaScript。 这看起来会更好，就像这样：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;