对齐剩余内容和自动尺寸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

回答

相关问题