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

这是工作小提琴：http://jsfiddle.net/7xLyc3q1/

Answer 2

你在这里得到了很多答案，但没有一个能解释这里究竟发生了什么。使用float时，您需要了解一些重要内容：浮动元素从框模型中提升，并且就其他元素而言，其宽度和高度实际上为零。有一种解决方法：通过在父元素中指定overflow:hidden，浮动元素将不再“＃34;崩溃＆＃34;。

这里有example来证明这一点。请注意，标题，内容和页脚都有一个width:100%，并且它们只会填充剩余的空间 - 这可能是您期望发生的。另请注意，没有必要将它们向右浮动......它们占据了剩下的空间。

Answer 3

尝试将float: right添加到.title，.content和.footer。

同样值得考虑使用Foundation或Twitter Bootstrap。两者都有网格系统，所以这将保证div调整大小适合任何大小的屏幕。

Answer 4

<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>

.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }

和jsfiddle http://jsfiddle.net/t85kz39a/

Answer 5

如果您可以指定图像的宽度，可以使用以下方法。我假设在这个演示中图像宽度为200px。

尝试以下CSS：

.wrapper{
    width: 600px;
    height: 200px;
    padding-left: 200px;
    border: 1px dashed gray;
}
.pic{
    float: left;
    width: 190px;
    margin-left: -200px;
    border: 1px dashed  blue;
}
.pic img {
    display: block;
}
.title{
    width: auto;
    height: 20%;
    border: 1px dotted blue;
}
.content{
    width: auto;
    height: 20%;
    border: 1px dotted blue;
}
.footer{
    width: auto;
    height: 20%;
    border: 1px dotted blue;
}

诀窍是打开一个空间来放置图像。添加200px宽的左边距 .wrapper。

填充将强制.title，.content和.footer从边缘对齐200px 包装器。

对于.pic，将宽度设置为200px（或更小）并将左边距设置为-200px以移动 它进入了填充区域。

最后，为.wrapper，600px设置正确的宽度。 .wrapper的总宽度 计算到800px（600px宽度+ 200px左边填充 - -200px左边距 浮动）。

请参阅演示：http://jsfiddle.net/audetwebdesign/mgg1stmc/

这种方法的主要好处是您不需要添加任何其他包装 元素。 （如果使用浮动，则需要额外的包装。）

Answer 6

在不改变HTML结构的情况下，有一种更简单的css方式：

演示 http://jsfiddle.net/bfhng3a9/

您需要的一切：

.wrapper {
    overflow:auto;
    text-align:center;
}
.pic {
    float: left;
    width:20%;
}
.title, .content, .footer {
    width:80%;
    float:right;
    clear: right;
}

Answer 7

您可以使用此代码，它可以根据您的设计进行操作。

<强> Live Working Demo

HTML代码：

<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>

CSS代码：

 .wrapper{
        position: relative;
        float: left;
        width: 1000px;
        height: 200px;
        border: 1px solid #000000;
    }
    .pic{
        float: left;
        width: 300px;
        height: 200px;
        background-color: red;
        position: relative;
    }
    .title{
        width: 650px;
        height: 60px;
        background-color: green;
        position: relative;
        left: 350px;
        top:-16px;
    }
    .content{
        width: 650px;
        height: 60px;
        background-color: blue;
        position: relative;
        left: 350px;
        top: -22px;
    }
    .footer{
        width: 650px;
        height: 60px;
        background-color: gold;
        position: relative;
        left: 350px;
        top: -28px;
    }

<强>结果：