Question

我有以下内容：

                <div class="outer" style="margin-bottom: 10px">
                   <div class="dialog-float">
                      <select name="AccountID" id="AccountID">
                     ...    
                      </select>
                   </div>
                   <div class="dialog-float">
                      <a href="xx"  role="button">Create</a>
                   </div>
                   <div class="dialog-float">
                      <label for="htmlEdit">Html Editor</label>
                   </div>
                </div>

我想做的是：

a）在“外部”类下面有10px的保证金。现在似乎DIV没有任何高度，并且边距不正确。 b）让所有“dialog-float”类垂直排列。

有人能给我一些关于我做错的建议。

Answer 1

将以下内容添加到您的css文件

.clear_cont, .cc {
    min-height: 1px;
}

.clear_cont:after, .cc:after {
    clear: both !important;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

//ok now IE6 doen't have min-height property here is a hack
* html .clear_cont, * html .cc{
    height: 1px;
}

每当您需要解决此类问题时，请将“cc”或“clear_cont”类添加到容器DIV

<div class="outer cc" style="margin-bottom: 10px">

Answer 2

为此解决方案添加包装元素：

<div class="outer" style="margin-bottom: 10px">
    <div class="inner_wrapper">
        <!-- ... -->
    </div>
</div>

<强>示例

http://jsfiddle.net/dbjPV/2/

<强> CSS

.outer {
    border: 1px solid #ff0000; /* Show element size */

    margin-bottom: 10px;
    height: 200px;
    display: table;
    overflow: hidden

    /* Include in separate IE CSS-file */
    /*position: relative;*/
}

.inner_wrapper {
    display: table-cell;
    vertical-align: middle;

    /* Include in separate IE CSS-file */
    /*position: absolute;
    top: 50%*/
}

.dialog-float {
    border: 1px solid #00aa00; /* Show element size */

    /* Include in separate IE CSS-file */
    /*position: relative;
    top: -50%*/
}

Answer 3

如果是我，我会使用以下css：

.outer{
    margin-bottom: 10px;
    min-height: 100px;
    width: [some width];
}

这应该这样做。

外框的最小宽度为100px，并随内容增长。并且底部总是有10px的边距。

此外宽度在我看来总是最好设置。然后你总是知道它有多大。

并且不要忘记div是一个块元素，因此当像你一样放置时，它将始终显示为verticle。

小贴士：我从不（至少尝试从不）使用明确的div。我认为最好为浮动div声明一个宽度，这样它就能很好地适应容器div而其他div不会得到双方。如果你把它们作为花车而不是你可以使用 display：block css，但是我不确定它是否会超过浮动。

如何在外部DIV中垂直排列CSS？

3 个答案: