Question

我想知道是否有任何方法可以使用弹性盒保持相同的结构（顺序：box1，box2，box3和box4）来实现这种组合。

我得到了这个，但box4被推到了其他框下方：http://codepen.io/anon/pen/xRVEwW

.container{
  width:600px;
  position:relative;
}
.box1, .box2, .box3, .box4{
  width: 200px;
}
.box2, .box4{
  margin:0 auto;
}
.box1{
  background:pink;
  position:absolute;
  left:0;  top:0;
}
.box2{
  background:lightgreen;
}
.box3{
  background:lightgrey;
  position:absolute;
  right:0;  top:0;
}
.box4{
  background:lightblue;
}

<div class='container'>
  <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra.  Vivamus vehicula leo mauris.</div>
  <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div>
  <div class="box4">Box 4.</div>
</div>

Answer 1

删除flex属性并使用float：

方框1和方框2上的{p> float:left，方框3和方框4上的float:right。无需更改HTML：

.container{
  width:600px;
}
.box1, .box2, .box3, .box4{
  width: 200px;
}
.box1{
  background:pink;
  float: left;
}
.box2{
  background:lightgreen;
  float: left;
}
.box3{
  background:lightgrey;
  float: right;
}
.box4{
  background:lightblue;
  margin:0 auto;
  float: right;
}

<div class='container'>
  <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra.  Vivamus vehicula leo mauris.</div>
  <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div>
  <div class="box4">Box 4.</div>
</div>

http://codepen.io/anon/pen/eBZBYL

Answer 2

我想知道是否有任何方法可以使用柔性盒保持相同的结构来实现这种组合。

是的，有一种方法可以在不对HTML进行任何更改的情况下实现布局。你走了：

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 600px;
  height: 500px;
}

.box1 { flex: 100%; order: 0; }
.box2 { flex: 80%;  order: 1; }
.box3 { flex: 100%; order: 3; }
.box4 { flex: 20%;  order: 2; }

.box1 { background: pink;      width: 200px; }
.box2 { background:lightgreen; width: 200px; }
.box3 { background:lightgrey;  width: 200px; }
.box4 { background:lightblue;  width: 200px; }

<div class='container'>
  <div class="box1">Box 1.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
  <div class="box2">Box 2.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra.  Vivamus vehicula leo mauris.</div>
  <div class="box3">Box 3.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum odio, eget mattis quam. Curabitur rutrum lorem a augue egestas, ut rhoncus mi viverra. Vivamus vehicula leo mauris, eu facilisis ex placerat id. Sed at ornare augue, id hendrerit nibh. Suspendisse sit amet velit sapien. Nulla sit amet ligula ac leo ultrices egestas et eget augue. Integer non metus tellus. Nam sed lorem et magna gravida laoreet. Vivamus et varius ipsum, ac mattis mi.</div>
  <div class="box4">Box 4.</div>
</div>

revised codepen

关键点：

使用列方向，启用wrap的flex容器。
定义容器的高度（以便Flex项目知道包装的位置）。
第一列和第三列获得全高（flex-basis: 100%或速记flex: 100%）。
第二列和第四列合并，因此请根据需要调整其高度，并使用order属性在第3列之前移动第4列。

Answer 3

将// since you are using hive I used hiveContext below... val dataframe = hiveContext.sql("select * from e360_models.employee "); df.show(10) // to verify whether data is there in dataframe or not df.printSchema(); // print schema as well for debug purpose. dataframe.write.mode(SaveMode.OverWrite).insertInto("default.ged_555") val sampleDataFrame = hiveContext.sql("select * from default.get_555"); // again do print 10 records to verify your result for debug purpose sampleDataFrame.show() // again print schema of the target table sampleDataFrame.printSchema()和box2换成公共div
将box4（或align-items: flex-start;）添加到baseline

＆＃13;

.container

＆＃13;

.container{
  width:600px;
  display:flex;
  flex-wrap:wrap;
  align-items: flex-start;
}
.box1, .box2, .box3, .box4{
  width: 200px;
}
.box1{
  background:pink;
}
.box2{
  background:lightgreen;
}
.box3{
  background:lightgrey;
}
.box4{
  background:lightblue;
}

＆＃13;

http://codepen.io/borkdude/pen/VmaKRZ

在没有绝对位置的情况下重新布置弹性项目

3 个答案: