-1

私はウェブサイトの構築に取り組んでいますが、いくつかの問題があります。これは現在の外観です。

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;
}
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 に答える