-1

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

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

而且，当然这就是我希望它看起来的样子：

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

我已经尝试了很多 div align this 和类似的东西，但似乎没有任何效果。有任何想法吗？下面的代码：

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

3 回答 3

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;
}
于 2012-11-29T00:21:55.467 回答
0

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

jsFiddle:

http://jsfiddle.net/6rCgc/

我想我已经使用更简单的标记和 css 实现了您正在尝试的目标。

于 2012-11-28T23:57:10.793 回答
0

.viewlistings通过将其标记移到.innerrealator. 只有这样，它才会飘到正确的地方。此外，如果您从 中删除height: 70px;，.realtor则该框将展开以包含其子项。

我看不到您的图像，但您可能需要对viewarrow.png.

于 2012-11-28T23:49:17.167 回答