左对齐内容并自动调整 div

Posted 2023-02-25

【中文标题】左对齐内容并自动调整 div

【英文标题】：Align content left and auto size div

【发布时间】：2014-01-28 21:25:13

【问题描述】：

我需要让我的每个 div 与主要内容 div 的边缘对齐并保持在一条线上，除非加载的动态内容比固定宽度宽。假设是 300 像素。我希望主容器根据内容宽度自动调整大小，并在内容的每一侧留出 20px 的边距。如果内容超过主容器 div 的最大宽度，我希望内容自动放置在新行上。 Here 是我的 jsfiddle。我似乎无法让它正确对齐到左侧或自动缩放。

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

【问题讨论】：

这是一个令人生畏的（并且标签不正确）div 树...

【参考方案1】：

另一种方法是在要浮动的每个 div 上使用 display: inline-block。像this 这样如果您的内容（如所见）是可变的，这可能会很有用

.inline
    display: inline-block;

如果你想使用float:left，别忘了最后的clearfix。

编辑：

为了使您的代码正常工作，您必须删除 H3 的 margin 并设置 line-heigth 和 vertical-align ：jsfiddle

.clearfix
    clear:both;


.dealerName h3
    margin:0;


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

对我来说，最干净的方法是使用display: inline-block。

【参考方案2】：

使用这个 CSS：

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

它与所有主流浏览器兼容，可以满足您的一切需求。