Question

我试图在同一条线上对齐两个div。没问题，但现在我正在寻找一个解决方案，在每个div上都有相同的高度，问题是第一个只包含一个图标而第二个包含的文本可能比图标占用更多的空间。我正在寻找一个可以帮助我做这件事的css财产......

＆＃13;

.zone-info {
    background-color: #e0f1f5;
    line-height: 1.363em;
    margin-bottom: 3px;
    padding: 5px 0;
}

.zi-icon {
    display: inline-block;
    float: left;
    text-align: center;
    vertical-align: center;
    height: 100%;
    width: 10%;
}

.zi-text {
    width: 90%;
    display: inline-block;
    float: left;
}

＆＃13;

<div class="zi-icon zone-info">icone</div>
<div class="zi-text zone-info">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.<br>
    # Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.<br>
    # Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</br>
    # Sed ut perspiciatis unde omnis iste natus error sit. 
</div>

＆＃13;

这是我现在所做的事情的Jsfiddle。 http://jsfiddle.net/nc6L227z/

Answer 1

将两个div包裹在.wrapper元素中并提供display: table。然后将display: table-cell提供给内部div并从其他元素中删除float:left和display: inline-block：

编辑：（添加垂直对齐）

检查Updated DEMO

.wrapper { display: table }
.zone-info {
    background-color: #e0f1f5;
    display: table-cell;
    line-height: 1.363em;
    vertical-align: middle;
}

.zi-icon {
    text-align: center;
    width: 10%;
}

.zi-text {
}

Answer 2

您可以使用table-cell或新的css属性 flex

 div{display:flex} //you don't need float , inline-block, table cell anythng

DEMO

Answer 3

你可以把右边的一个包含在左边。

＆＃13;

.col1 {
    float: left;
    border: 1px solid green;
    margin-right: 200px;
    background: red;
}

.col1-content {
    float: left;
    width: 50px;
}
.col2 {
    float: left;
    background: green;
}
.col2-content {
    width: 200px;
    
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

＆＃13;

<div class="outer">
    <div class="inner clearfix">
        <div class="col1">
            <div class="col1-content">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="col2">
                <div class="col2-content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni excepturi animi vitae saepe ratione cumque nostrum eius impedit delectus quibusdam eaque earum et iusto quam soluta. Expedita eius perspiciatis necessitatibus facilis dignissimos quis velit maiores incidunt sequi odio non reprehenderit ut cum perferendis enim. Eligendi fugit nesciunt dolore aliquam numquam.
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 4

检查Fiddle

我添加了父div并在其上应用了高度。

在CSS中为两个div设置相同的高度

4 个答案: