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

我试图在同一行上对齐两个div。没有问题，但现在我正在寻找一种解决方案，以在每个div具有相同的高度，问题是第一个只包含一个图标，第二个包含的文本可能需要比图标更多的空间。我在寻找一个CSS属性不是可以帮我做这件事......为CSS中的两个div设置相同的高度

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

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

这里是我的时刻做的jsfiddle。 http://jsfiddle.net/nc6L227z/

来源

2015-01-16 Snabow

将这两个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 { 
}

来源

2015-01-16 08:10:14 kapantzak

检查Fiddle

我已添加父母div并在其上应用身高。

来源

2015-01-16 08:12:12 ArinCool

您可以使用表单元格或一个新的CSS属性柔性

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

DEMO

来源

2015-01-16 08:13:30

想法不错，但在IE8工作:-( – Snabow

嗯，那么它的一个概率，坚持使用表单元格，则：| –

你可以有正确的包含在左边。

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

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

来源

2015-01-16 08:17:03 HerrSerker

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

回答

相关问题