對齊剩餘內容和自動尺寸div

我需要將每個div對齊主內容div的邊緣並保留在一行上，除非加載的動態內容寬於固定寬度。比方說300px。我希望主容器根據內容寬度自動重新調整大小，並在內容的每一側留出20像素的邊距。如果內容超過主容器div的最大寬度，我希望內容自動放置在新行上。 Here是我的jsfiddle。我似乎無法讓它正確對齊左側或自動縮放。對齊剩餘內容和自動尺寸div

<div class='info_content'> 
    <div class='dealerName'><h3>{{dealerName}}</h3></div> 
     <div class='address'>{{address}}</div> 
      <div class='addressCont'>{{city}}, {{state}} {{zip}}</div> 
       <div class='telephone'><label for='phone'>Phone:</label>{{phone}}</div> 
        <div class='tags'><label for='Tags'>Tags:</label>{{tags}}</div> 
         <div class='dealerWebsite'><a href='{{href}}'>{{href}}</a></div> 
</div>

CSS：

#DealerInfoContainer { 
    float: left; 
    margin-left: 50px; 
    max-width:400px; 
    height: auto; 
    border: 1px solid #000000; 
} 

#DealerInfo { 

} 

#DealerInfo p { 
    margin-top: -20px; 
} 

.telephone { 
    float: left; 
} 

.address { 
    float: left; 
} 

.addressCont { 
    float: left; 
} 

.tags { 
    float: left; 
} 

.dealerWebsite { 
    float: left; 
} 

.dealerName { 
    float: left; 
} 

.info_content { 
    width: 300px; 
}

來源

2014-01-28 Yamaha32088

這是一個令人生畏的（不正確的選項卡）'div'樹... –

不同的方式，是在每個div的要上浮使用display: inline-block。像this這可能是有用的，如果如果你想使用float您的內容（作爲一個可以看到）是可變的

.inline{ 
    display: inline-block; 
}

：離開了，不要忘了在最後的clearfix。

編輯：

爲了讓你的代碼工作，你必須刪除margin爲H3和設置line-heigth與vertical-align：jsfiddle

.clearfix{ 
    clear:both; 
} 

.dealerName h3{ 
    margin:0; 
} 

.align{ 
    line-height :30px; 
    vertical-align: baseline; 
}

對我來說，最乾淨的方法是用display: inline-block。

來源

2014-01-28 21:37:27 kevpoccs

使用此CSS：

div {float:left;display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;}

這是一個與所有主要的瀏覽器兼容，你想要做的一切。

來源

2014-01-29 01:57:05 user3246890

對齊剩餘內容和自動尺寸div

回答

相關問題