Question

我需要创建这样的布局：

     |  two
one  -------
     |  three

这是我的代码：

<div class="group">
    <div class="name">one
    </div>
    <div class="con2">
        <div>two</div>
        <div>three</div>
    </div>    
</div>

的CSS：

div.group {
    background-color: #093;
}

div.name {
    background-color:#00F;
    display: inline;
}

div.con2 {
    background-color:#FF6;
    display: inline;
}

jsFiddle：http://jsfiddle.net/mkurY/

Answer 1

您可以使用table-cell属性（仅适用于ie8 +），并为ie7提供后备解决方案 -

http://jsfiddle.net/mkurY/1/

Answer 2

你不应该考虑使用表格，从你的图表判断，这是一个语义上正确的事情吗？

Answer 3

我认为你应该漂浮你的div。 http://jsfiddle.net/zVjjM/

HTML

<div class="group">
    <div class="name">one</div>
    <div class="con2">
        <div>two</div>
        <div>three</div>
    </div>    
</div>

CSS

div.group {
    background-color: #093;
    overflow: auto;
}

div.name {
    background-color:#00F;
    float: left;
}

div.con2 {
    background-color:#FF6;
    float: left;
}

Answer 4

div.name {
    background-color:#00F;
    display: inline;
    float:left;
}

div.con2 {
    background-color:#FF6;
    display: inline;
    float:left;
}

只需将高度添加到与其他两个区域一样高的高度，然后将文本对齐中心

Answer 5

您需要为div使用float。我已经更新了foll0wing链接中的代码 http://jsfiddle.net/mkurY/

显示内联块

5 个答案: