爲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設置相同的高度

回答

相關問題