父母div与浮动儿童反应迟钝

Question

我的第一个问题是这些框没有像这样正确对齐：

第二个问题是，我试图建立一个响应式div，其中rightHand父级div响应性地收缩，同时让浮动孩子也响应性地崩溃成一行，每个多维数据集将从它的父母是其父母宽度的四分之一。

此处my fiddle.

＆＃13;

＆＃13;

.rightHand {
  height: 100%;
  width: 680px;
  float: right;
  background-color: #000000;
}
.rightHandOverlay {
  background-color: white;
  opacity: 0.5;
}
.rightHand p {
  color: white;
  position: relative;
  text-align: center;
}
.box {
  width: 100px;
  height: 100px;
}
.redBox {
  float: left;
  background-color: red;
  left: 0;
  top: 0;
}
.greenBox {
  float: right;
  right: 0;
  top: 0;
  background-color: green;
}
.blueBox {
  float: right;
  bottom: 0;
  right: 0;
  background-color: blue;
}
.yellowBox {
  float: left;
  left: 0;
  bottom: 0;
  background-color: yellow;
}

＆＃13;

<div class='rightHand'>
  <div class="box redBox"></div>
  <div class="box greenBox"></div>
  <p>hi this is a test</p>
  <div class="box blueBox"></div>
  <div class="box yellowBox"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你的意思是什么？

jsfiddle

coln = df.columns
df.ix[:, coln[0]] # to access the first column of the dataframe.