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{
    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*/
}

demo

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

在CSS中的Div风格，如何在按钮下启动

2 个答案: