div并排排列不正确

Question

我在我的应用程序中并排放置了3个div，在div之后，我保留了一个提交按钮。

如果我今天选择提交按钮，这就是日期选项：

但如果我选择具体的日期，就会发生这种情况：

这就是代码的样子：

<div class="filters clearfix" style="float:left" id="sel_filters">
    <div class="fields">
       <div class="10">
          <!-- this is for the date option . it contains a label and select element-->
       </div>
       <div>
          <!-- label for start date and an input box -->
       </div>
       <div>
          <!-- label for end date and an input box -->
       </div>
       <div>
          <!-- label for adnetwork options "&nbsp;" and the select element -->
       </div>
       <input id="startdate_hidden" type="hidden" style="display:none;" value="" name="data[Fam][startdate_hidden]">
        <input id="enddate_hidden" type="hidden" style="display:none;" value="" name="data[Fam][enddate_hidden]">
        <input id="submit" class="stdButton" type="submit" onclick="return  updateAddetailsNetworkWiseReport();" value="Submit" name="submit">
    </div>
</div>

现在样式：

.clearfix:after 
{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
div#sel_filters 
{
  margin-left: 10px;
  width: 754px;
}

div.filters div.fields 
{
  background: url("/img/bg_summary.gif") no-repeat scroll right bottom #FFFFFF;
  height: 38px;
  padding-right: 10px;
}
div#sel_filters div.fields div.l0 
{
  margin-left: 0;
}

我将 style =＆＃34; float：left＆＃34; 添加到最外层的div，但此问题仍然存在。具体的解决方案是什么？

Answer 1

代替float您可以使用display:inline-block来使用white-space属性。像这样：

<强> CSS：

.parent{
    white-space:nowrap;
}
.child{
    background:red;
    margin:10px;
    width:150px;
    height:100px;
    white-space:normal;
    display:inline-block;
    *display:inline /*IE7*/
    *zoom:1;
}

<强> HTML

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

http://jsfiddle.net/amhWX/

Answer 2

对我而言，在底部图像上看起来两个图像出现在日期框旁边，这导致元素对于包含div而言变宽。

尝试调整一些元素的大小，使它们缩小20-30px或;使包含的分区宽度更大，这应该可行。