在css中划分样式，然后按钮下如何开始

Question

我有右边站点的红色div和左边的按钮现在测试在红色div下开始，但我希望该文本在按钮下开始，然后在红色div下面开始。以下是当前不起作用的示例：http://jsfiddle.net/QdvFp/127/

<div class="parent">
    <div class="child">1</div>
    <div class="child2">Button</div>
</div>
<div>
    My text, which should start on the left site under the buttton, and then go under the red div, like in newspapers
</div>
.child{
    display:inline-block;
    *display:inline; /* for IE7*/
    *zoom:1;/* for IE7*/
    margin-right:10px;
    background:red;
    min-width:100px;
    min-height:50px;
}
.parent{
    white-space:nowrap;
}
.child2{
    display:inline-block;
    *display:inline; /* for IE7*/
    *zoom:1;/* for IE7*/
        background:green;
}

Answer 1

一种解决方案是使用float: left到.child类：

.child {
  display: inline-block;
  *display: inline;
  /* for IE7*/
  *zoom: 1;
  /* for IE7*/
  margin-right: 10px;
  background: red;
  min-width: 100px;
  min-height: 50px;
  float: left;
}
.parent {
  white-space: nowrap;
}
.child2 {
  display: inline-block;
  *display: inline;
  /* for IE7*/
  *zoom: 1;
  /* for IE7*/
  background: green;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child2">Button</div>
</div>
<div>
  My text, which should start on the left site under the buttton, and then go under the red div, like in newspapers
</div>

Answer 2

您需要使用float:left;

.child{
    display:inline-block;
    *display:inline; /* for IE7*/
    *zoom:1;/* for IE7*/
    margin-right:10px;
    background:red;
    min-width:100px;
    min-height:50px;
    float: left; /*add this css rule*/
}

演示