link - html title tag




동일한 높이의 항목 나열 (6)

나는 바이올린을 만들었다 : http://jsfiddle.net/pQZ8f/

수동으로 높이를 설정하지 않고 두 항목이 같은 높이가되도록하고 싶습니다. 나는 그것이 자랄 수 있기를 바랍니다. 나는 자바 스크립트를 사용하고 싶지 않다. CSS를 통해 할 수 있습니까?


2018 년, 우리는 디스플레이 : flex (97.66 % 브라우저 지원 ( https://caniuse.com/#feat=flexbox ))를 가지고 있습니다.

flexbox를 사용하면 다음 작업 만 수행하면됩니다.

ul {
  display: flex;
}

li{
 width:100px;
 border: 1px solid black;   
}

다음은 바이올린입니다. http://jsfiddle.net/pQZ8f/1076/


다음을 사용할 수 있습니다 : LI 요소에 display : inline-table

li {
    width:100px;
    background: red;
    display: inline-table
}

여기는 JSFiddle


아, 옛날 같은 높이의 컬럼 문제.

한 가지 해결책은 아래쪽 여백 / 패딩을 사용하여 방구하는 것입니다.

IE7 +에서 작동합니다 (ie6을 사용하여 작동 할 수도 있습니다. 설치하지 않았을 수도 있습니다).

ul {
    overflow: hidden;
    border: 1px solid black;
    float: left;
}
li {
    float:left;
    width:100px;
    background: red;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
li + li {
    border-left: 1px solid black;
}

JSfiddle 데모


이 목적으로 jquery.matchHeight.js 라이브러리를 사용합니다. 모든 li 요소에 class = "frame-height" 를 추가하면 모든 li 요소가 가장 높은 li 요소와 동일한 높이가됩니다.


그들이 같은 높이를 원 하느냐에 달렸습니다. 어떤 전반적인 효과를 얻으려고합니까?

하나의 옵션 : 단순히 배경이나 무언가와 일치 시키려한다면, <ul> 대신 <ul> 에 배경을 넣고 <ul> 이 자동으로 확장되어 최대 높이가 자식 요소.

또한 텍스트의 아래쪽 을 정렬 할 수 있도록 같은 높이로 만들려고하는 경우 display: inline-block float 대신 display: inline-block 을, horizontal-align: bottom; 결합 할 수 있습니다 horizontal-align: bottom; . 이 피들의 결과는 적어도 <li> 의 높이는 같지만 경계선에서는 작동하지 않는 무언가를 얻습니다.


ul 
{
  display: table;
}

li
{
  display:table-cell;   
} 




css