對齊一系列的div

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

通過.innerrealator之前移動它的標記獲取.viewlistings到位。只有這樣它才能浮到正確的位置。此外，如果您從.realtor刪除height: 70px;，那麼該框將展開以包含其子項。

我看不到您的圖片，但您可能需要對viewarrow.png做同樣的事情。

Answer 2

看一看這個，我試着重新創建您的情況：

jsFiddle: 

http://jsfiddle.net/6rCgc/

我想我已經實現了你所使用稍微簡單一些標記和CSS嘗試。

Answer 3

我編輯你的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; 
}