Question

我正在建立我的网站，我遇到了一些困难。这就是它目前的样子：

http://i1134.photobucket.com/albums/m618/eshellborn/ScreenShot2012-11-28at43250PM.png

当然，这就是我想要的样子：

http://i1134.photobucket.com/albums/m618/eshellborn/ScreenShot2012-11-28at43306PM.png

我已经尝试了很多div对齐这样的东西，似乎没有什么工作。有任何想法吗？代码如下：

HTML：

<div class="realtor"> 
    <img src="bronson.png" align="left" />
    <div class="innerrealtor">
        <h3>Bronson Carmichael</h3>
        <p class="realtorinfo"> Bronson has been in the industry for thousands of years, with over 12 client expiriences. Join him on your journey to find a home in the Cranbrook area. </p>
    </div>
    <div class="viewlistings">
        <div>View Bronson's Listings</div>
        <img src="viewarrow.png" />
    </div>
</div>

CSS：

.innerrealtor {
    width: 450px;
    margin-left: 90px;
    margin-top: -3px;
}
.realtor {
    padding: 15px;
    margin-top: 25px;
    background-color: #F9F8E7;
    width: 750px;
    height: 70px;
    border-radius: 5px;
}
.viewlistings {
    width: 180px;
    height: 50px;
    background-color: #018D0E;
    border-radius: 4px;
    float: right;
    text-align: right;
}
.viewlistings div {
    padding-top: 3px;
    margin-right: 50px;
    font-family: 'Sanchez', serif;
    color: #ffffff;
    font-size: 16px;
    font-weight: 100;
}
.viewlistings img {
    position: relative;
}

Answer 1

我编辑了你的CSS，它现在正在运行：

给.viewlistings div您首选的width和margin-right

.innerrealtor {
width: 450px;
margin-left: 90px;
margin-top: -3px;
float:left;
}


.realtor {
padding: 15px;
margin-top: 25px;
background-color: #F9F8E7;
width: 750px;
height: 70px;
border-radius: 5px;
}

.viewlistings {
width: 180px;
height: 50px;
background-color: #018D0E;
border-radius: 4px;
float: right;
text-align: right;
}

.viewlistings div {
padding-top: 3px;
margin-right: 0px;
font-family: 'Sanchez', serif;
color: #ffffff;
font-size: 16px;
font-weight: 100;
width:100px;
background:red;
float:left;
}

.viewlistings img {
position: relative;
}

Answer 2

通过在.viewlistings之前移动标记来获取.innerrealator。只有这样它才能漂浮到正确的位置。此外，如果您从height: 70px;移除.realtor，则该框会展开以包含其子项。

我无法看到您的图片，但您可能需要对viewarrow.png执行相同的操作。

Answer 3

看看这个，我试图重新创造你的情况：

jsFiddle:

http://jsfiddle.net/6rCgc/

我认为我已经使用更简单的标记和CSS来实现您的目标。

对齐一系列div

3 个答案: