Question

请看下面的图片http://i.stack.imgur.com/uhhE9.png我试图创建类似的设计，但它有一些问题，例如当你的项目少于4时它显示一些白色空间目前在fiddler下面我添加对于2个或超过4个项目不合适的.p-group { line-height: 6.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/ 或代码

＆＃13;

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

＆＃13;

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

＆＃13;

如何使div的高度相同，请看下面

1 个答案: