如何将div彼此对齐？

nathansizemore 发表于 Dev

克里斯

我正在尝试将这些div设置为像这样对齐：

在此处输入图片说明

但它们最终要么彼此重叠（.title占据了整个容器的宽度），要么彼此重叠。有想法吗？

.wrapper{
    display: table;
    float: left;
    width: 1000px;
    height: 200px;
}
.pic{
    float: left;
    width: 100%;
    height: 20%;
}
.title{
    width: 100%;
    height: 20%;
}
.content{
    width: 100%;
    height: 20%;
}
.footer{
    width: 100%;
    height: 20%;
}

HTML：

<div class="wrapper">
    <div class="pic"><img src="..."></div>
    <div class="title"><p>title</p></div>
    <div class="content"><p>lorem ipsum</p></div>
    <div class="footer"></div>
</div>

JS FIDDLE：http：//jsfiddle.net/mmb84836/

UID

根据最佳做法：

将Pic放在一个Box中，将其他三个Box放在一个Box中，然后使用“float:left或**display:inline-block**”。

这是相同的代码：

的HTML

<div class="wrapper">
    <div class="leftBox">
        <div class="pic">pic</div>
    </div>
    <div class="rightBox">
        <div class="title">title</div>
        <div class="content">content</div>
        <div class="footer">footer</div>
    </div>
</div>

的CSS

div {
    border:1px solid #000;
}
.wrapper {
    display: block; /*Default Property - You Can Remove Also*/
    width: 1000px;
    height: 200px;
}
.leftBox {
    float:left;
    width :20%;
    height:100%
}
.rightBox {
    width :79.5%;
    float:left;
     height:100%
}
.pic {
    width: 100%;
    height: 100%;
}
.title {
    width: 100%;
    height: 20%;
}
.content {
    width: 100%;
    height: 20%;
}
.footer {
    width: 100%;
    height: 20%;
}