[html,css] table-cell, table-layout 속성으로 너비고정 하기!!

부모 : display:table; table-layout:fixed;
(display:table에 width:100%을 함께 써줘야함)
자식 : display:table-cell;

<완성본>

부모 요소에 table-layout 속성값을 fixed로 지정하면 셀안에 데이터 값의 길이가 길어져도 셀 너비는 고정되며, 넘치는 데이터값은 줄바꿈처리 됩니다.
자식 요소에 display:table-cell을 주면 li의 개수만큼 동일한 너비의 셀이 생성됩니다.

1, html

<div class="list_wrap">
  <ul class="list">
    <li>
      <h2>타이틀 입력</h2>
      <p>내용을 입력해주세요.</p> 
    </li>
    <li>
      <h2>타이틀 입력</h2>
      <p>내용을 입력해주세요.</p> 
    </li>
    <li>
      <h2>타이틀 입력</h2>
      <p>내용이 길어져도 셀 너비는 고정됩니다. 내용이 길어져도 셀 너비는 고정됩니다.</p> 
    </li>
  </ul>
</div>

 

2. CSS

.list_wrap {min-width:1000px; max-width:1400px; margin:0 auto;}
.list {width:100%; display:table; table-layout:fixed;}
.list li{display:table-cell; vertical-align:middle; text-align:center;  background:pink}
.list li + li {border-left:1px solid #444; background:orange} /*li + li두번째 li부터*/
.list li + li + li {background:skyblue} /*li + li + li세번째 li부터*/