Как сделать ту же самую высоту div смотрите ниже

Question

Пожалуйста, посмотрите ниже изображение http://i.stack.imgur.com/uhhE9.png Я попытался создать похожий дизайн, но у него есть некоторые проблемы, например, когда ваш товар меньше 4, он показывает некоторые пробелы в настоящее время ниже скрипач я добавил .p-group { line-height: 6.2;, которая не подходит для 2 или более чем в четыре пункта, кто-то предложить мне воссоздать с помощью элементов списка ul li

.p { 
    overflow: hidden; 
    width: 100%; 
} 
.p-left { 
    float: left; 
    /*background:#fdd;*/ 
} 
.test { 
    float: left; 
    background: #acacac; 
    color: white; 
    font-family: "Century Gothic"; 
    font-size: 14px; 
} 
    .test:hover { 
     cursor: pointer; 
     background: #2F7AC6; 
    } 
.ht { 
    min-height: 180px; 
} 
.p-group { 
    margin-top: 5px; 
    -ms-transform: rotate(270deg); /* IE 9 */ 
    -moz-transform: rotate(270deg); /* Firefox */ 
    -webkit-transform: rotate(270deg); /* Safari and Chrome */ 
    -o-transform: rotate(270deg); /* Opera */ 
    overflow: hidden; 
} 
.p-right { 
    border: 1px solid #efefef; 
    color: white; 
    overflow: hidden; 
    width: 75%; 
} 
.p-item { 
    float: left; 
    width: 100px; 
} 
.a-left { 
    overflow: hidden; 
} 
.p-item div { 
    border: 1px solid white; 
    background: #cacaca; 
    color: white; 
    font-family: "Century Gothic"; 
    font-size: 14px; 
    padding: 2px; 
} 
    .p-item div:hover { 
     background: #428ad2; 
     cursor: pointer; 
    } 
<div class="p"> 
<div class="p-left"> 
     <div class="a-left"> 
        <div class="test"><div class="p-group">Group</div></div> 
     <div class="p-item"> 
     <div>A</div> 
     <div>B</div> 
     <div>C</div> 
     <div>D</div> 
     </div> 
    </div> 
    <div class="a-left"> 
     <div class="test"><div class="p-group">Group</div></div> 
     <div class="p-item"> 
     <div>A</div> 
     <div>B</div> 
     <div>C</div> 
     <div>D</div> 
     </div> 
    </div> 
</div> 
<div class="p-right"> 
    <div class="ht"></div> 
</div> 

http://jsfiddle.net/Ldym8w78/17/

Answer 1

Пожалуйста, проверьте эту скрипку http://jsfiddle.net/966naq5e/18/ или код

.p{ 
 
    width: 100%; 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
.p-left{ 
 
    display: table-cell; 
 
    width: 200px; 
 
    background: #333; 
 

 
padding: 10px; color: #fff; 
 
} 
 
.p-right{ 
 
    display: table-cell; 
 
    background: #666; 
 
}

<div class="p"> 
 
<div class="p-left"> 
 
     <div class="a-left"> 
 
        <div class="test"><div class="p-group">Group</div></div> 
 
     <div class="p-item"> 
 
     <div>A</div> 
 
     <div>B</div> 
 
     <div>C</div> 
 
     <div>D</div> 
 
      <div>A</div> 
 
     <div>B</div> 
 
     <div>C</div> 
 
     <div>D</div> 
 
     </div> 
 
    </div> 
 
    <div class="a-left"> 
 
     <div class="test"><div class="p-group">Group</div></div> 
 
     <div class="p-item"> 
 
     <div>A</div> 
 
     <div>B</div> 
 
     <div>C</div> 
 
     <div>D</div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="p-right"> 
 
    <div class="ht"></div> 
 
</div>