Question

CSS：

h1
{
   display: inline-block;
   margin-right: 5px;
   float: right;   
}

.ControlsBox
{
   display: inline-block;
   padding: 10px 0;
   margin: 5px 0;
}

HTML：

<div class="ManagementBox">
    <div style="background-color: #397249;"> 
    <h1>This is h1</h1>
    <div class="ControlsBox" id="BatchOperations">
    <a><img ... ></a>
    <a><img ...></a>
    </div>
</div>

<div style="background-color: #ff6600;">
    <div  class="ControlsBox" id="FiltersBox">
    <select> ... </select> 
    <select> ... </select> 
    <input id="Filter_Phrase" name="Filter_Phrase" ...>
    </div>
 </div>

在上面的代码中，我要做的是创建一个包含3个部分的框（管理框）： h1 ，它被推到右上角角落， BatchOperations ，它被推到左上角，最后是 filtersbox ，它占据了底部。

为此，我将 filtersbox 与其他两个div元素（具有不同的背景颜色）分开。但是，当我这样做时，他们就混淆了。为什么这样？

Answer 1

from timeit import Timer def build_list(n): return list(range(n)) # create list of 1 to n def build_dict(n): # build dict = { 0:"0", 1:"1", 2:"2", ... n:"n" } return {i: str(i) for i in range(n)} # from last listing in this chapter def inx(x,n): # do in front, middle, end, and not found str(0) in x str(n//2) in x str(n-1) in x str("a") in x # not in it timeList = Timer( "inx(x,n)", "from __main__ import n,build_list,inx; x = build_list(n)") timeDict = Timer( "inx(x,n)", "from __main__ import n,build_dict,inx; x = build_dict(n)") # get min of 5 runs of 5 print("N", "\t", "List", "\t", "Dict") for size in range(1000, 100000+1, 5000): # sizes to graph for n: n = size list_secs = timeList.repeat(5,5) dict_sect = timeDict.repeat(5,5) print(n, "\t", min(list_secs), "\t", min(dict_sect)) div上有错误的类命名尝试：

FiltersBox

Fiddle

Answer 2

div.upperBand {
    background-color: #397249;
}

    div.upperBand:after, div.upperBand:before {
        content: ' ';
        display: table;
    }

    div.upperBand:after {
        clear: both;
    }

    div.upperBand #BatchOperations {
        float: left;
    }

    div.upperBand h1 {
        display: inline-block;
        margin-right: 5px;
        float: right;
    }

div.lowerBand {
    padding: 10px 0;
    margin: 5px 0;
    background-color: #ff6600;
}

 <div class="ManagementBox">
        <div class="upperBand">
            <h1>This is h1</h1>

            <div class="ControlsBox" id="BatchOperations">
                <a>22</a>
                <a>33</a>
            </div>
            <!--<div style="clear:both;"></div>-->
        </div>

        <div class="ControlsBox lowerBand" id="FiltersBox">
            <div>
                <select> <option>2222</option> </select>
                <select>  <option>2222</option> </select>
                <input id="Filter_Phrase" name="Filter_Phrase" ...>
            </div>
        </div>
    </div>

分开2个div内容

2 个答案: