Html 如何对齐相邻的div？

我试图将这些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:

头衔

同侧眼睑

---

JS FIDDLE:

尝试将

float:right

添加到

.title

、

.content

和

.footer

也可能值得考虑使用或。两者都有网格系统，因此这将保证div可以调整大小以适应任何大小的屏幕

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

照片
oth1
oth2
oth3
.wrap{宽度：100；高度：200px；}
.pic{浮动：左侧；宽度：29%；高度：100%；右边距：1%；背景色：红色；}
。其他{浮动：左侧；宽度：70%；高度：32%；页边距底部：0.5%；背景色：绿色；}

和JSFIDLE

根据最佳实践： 将Pic放在一个框中，将右侧的其他三个框放在一个框中，并使用“

浮动：左

或

**显示：内联块**

”

以下是相同的代码：

HTML

---

这是一个有用的问题：这里有很多答案，但没有一个能解释这里到底发生了什么。当使用

float

时，有一点你需要了解：浮动元素是从盒子模型中取出的，对于其他元素来说，宽度和高度实际上为零。有一个解决方法：通过在父元素中指定

溢出：隐藏
，浮动元素将不再“折叠”

这里有一个例子可以说明这一点。请注意，标题、内容和页脚的宽度为
100%
，它们只填充了剩余的空间——这可能是您预期的结果。请注意，它们不需要向右浮动……它们占用了左侧的空间。
这里是一种方法如果你能为图像指定一个宽度的话，我会把它去掉。我假设在这个演示中图像的宽度是200px

尝试以下CSS：

.wrapper{
宽度：600px；
高度：200px；
左侧填充：200px；
边框：1px灰色虚线；
}
图{
浮动：左；
宽度：190px；
左边距：-200px；
边框：1px蓝色虚线；
}
.pic img{
显示：块；
}
.头衔{
宽度：自动；
身高：20%；
边框：1px点蓝色；
}
.内容{
宽度：自动；
身高：20%；
边框：1px点蓝色；
}
.页脚{
宽度：自动；
身高：20%；
边框：1px点蓝色；
}

诀窍是打开一个空间来放置图像
.wrapper

填充将强制
.title
、
.content
和
.footer
与边缘对齐200px
包装纸的一部分

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

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

请参见演示：

这种方法的主要好处是不需要添加任何其他包装
元素。（如果使用浮动，则需要额外的包装。）
有一种更简单的css专用方法，无需更改HTML结构：

演示

您需要的一切：

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

您可以使用此代码，它根据您的设计工作


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>

 .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;
    }

结果：

<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>

 .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;
    }

你能使用和共享创建一个代码演示吗？那会更有帮助！我通常会使用两个容器div，一个用于左，一个用于右，作为内联块。然后将图像放在左一个内，将标题、内容和页脚放在右一个内。
.pic
元素的宽度是多少？这为我节省了一个答案：P这正是我想要的meant@UID太好了！正是我想要的。干杯！
 .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;
    }