Question

我需要让每个div都与主内容div的边缘对齐并保持在一行，除非加载的动态内容宽于固定宽度。比方说300px。我希望主容器根据内容宽度自动重新调整大小，内容的每一边都有20px的边距。如果内容超过主容器div的最大宽度，我希望内容自动将其自行放在新行上。 Here是我的傻瓜。我似乎无法让它正确对齐左侧或自动缩放。

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

Answer 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。

Answer 2

使用此CSS：

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

它与所有主流浏览器兼容并完成您想要的一切。

左对齐内容和自动大小div

2 个答案: