html - 如何对齐彼此相邻的div？

Question

我正在尝试将这些 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/

Answer 1

根据最佳实践:

将 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%;
}

这是工作 fiddle :http://jsfiddle.net/7xLyc3q1/