Question

布局就是这样，tab-wrapper里面有3个div，tab-wrapper-top，seperator，tab-wrapper-bottom。我只是希望这些堆叠，所以我使用显示块和100％（所以他们填充整个tab-wrapper）。

为什么会破裂？

HTML

<html>
    <head>
        <title>Informação pessoal</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
    </head>
    <body>
        <div class="tab-wrapper">
            <div class="tab-wrapper-top">       
                <div id="tab-wrapper-top-left">
                    <div>
                        <label>Nome</label>
                        <input type="text" />
                    </div>
                    <div>
                        <label>Grau Académico</label>
                        <input type="text" />
                    </div>
                    <div>
                        <label>Profissão</label>
                        <input type="text" />
                    </div>
                </div>
                <div id="tab-wrapper-top-middle">
                    <div>Picture here</div>
                    <span>
                        <label>Data de entrada</label>
                        <input type="text">
                    </span>
                    <span>
                        <label>Data de saída</label>
                        <input type="text">
                    </span>
                    <span>
                        <label>Motivo da saída</label>
                        <select></select>
                    </span>
                </div>
                <div id="tab-wrapper-top-right">
                    <div>
                        <span>
                            <label>Unidade Habitacional</label>
                            <input type="text" />
                        </span>
                        <span>
                            <label>Extensão telefone</label>
                            <input type="text" />
                        </span>
                    </div>
                    <div>
                        <span>
                            <label>Tipo de contrato</label>
                            <select></select>
                        </span>
                        <span>
                            <label>Data contrato</label>
                            <input type="text" />
                        </span>
                        <span>
                            <label>Número de cliente</label>
                            <input type="text" />   
                        </span>
                    </div>
                        <div>
                            <label>Protocolo</label>
                            <select></select>
                        </div>
                </div>              
            </div>      
            <div class="separator">Separator</div>
            <div class="tab-wrapper-bottom">Bottom wrapper</div>
        </div>
    </body>
</html>

CSS

/* TABS */
 .tab-wrapper {
    position: relative;
    top: 90px;
    width: 98%;
    margin: auto;
}
.tab-wrapper label {
    margin: 5px 10px 5px;
}
.tab-wrapper input {
    margin: 5px 10px 5px;
}
.tab-wrapper select {
    margin: 5px 10px 5px;
}
.tab-wrapper textarea {
    margin: 5px 10px 5px;
    width: 90%;
}
.tab-wrapper-top {
    display: block;
    width: 100%;
    -webkit-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
.separator {
    display: block;
    width: 100%;
    background-color: red;
}
.tab-wrapper-bottom {
    display: block;
    width: 100%;
    background-color: red;
}
#tab-wrapper-top-left {
    display: block;
    float: left;
    width: 40%;
}
#tab-wrapper-top-left div {
    display: block;
}
#tab-wrapper-top-left label {
    display: inline-block;
    width: 20%;
}
#tab-wrapper-top-left input {
    width: 60%;
}
#tab-wrapper-top-middle {
    display: block;
    float: left;
    width: 18%;
}
#tab-wrapper-top-middle div {
    width: 90%;
    height: 40%;
    background-color: red;
}
#tab-wrapper-top-middle span {
    display: block;
}
#tab-wrapper-top-middle label {
    display: block;
}
#tab-wrapper-top-right {
    display: block;
    float: left;
    width: 40%;
}
#tab-wrapper-top-right div {
    display: block;
}
#tab-wrapper-top-right span {
    display: inline-block;
}
#tab-wrapper-top-right label {
    display: block;
}
#tab-wrapper-top-right input {
    display: inline-block;
}

http://jsfiddle.net/isherwood/koxjnrLf/

Answer 1

在div中使用浮动元素时，需要清除div之后的内容以将div设置为适当的高度。 “.clearfix”类是最常见的类。

.clearfix:before, .clearfix:after {content:""; display: table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

这是JS Fiddle

希望这有帮助。

Answer 2

你必须清除你的包装

.tab-wrapper-top:after {
    content: "";
    display: table;
    clear: both;
}

您可以删除所有div的display: block; - 无论如何都是默认样式

div定位显示块不工作

2 个答案: