Question

<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>

.div1 { 
    border: 1px solid red;
    float: left;
    width: 20px;
}
.div2 {
    border: 1px solid green;
    width: 100%;
}

请在JS Fiddle

查看我的代码

我想让div 1拉伸div 2和3的高度，就像你对table的rowspan一样。

我不太熟悉如何在div中做表格来解决这个问题。

谢谢！

Answer 1

您可以使用table / table-cell display css选项。

更新修复拉伸问题。

<div style="display:table">
    <div style="display:table-cell;height:100%;" class="div1">
        1
    </div>
    <div style="display:table-cell;width:100%">
        <div class="div2">2</div>
        <div class="div2">3</div>
    </div>
</div>

链接到JSFiddle：https://jsfiddle.net/pho5p7cc/8/

Answer 2

我会用一个容器来装你的DIV 2,3。然后在容器的左边缘，为你的DIV 1留出空间。我不确定它是最顺畅的编码方式，但它确实有效。 https://jsfiddle.net/pho5p7cc/3/

HTML

<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>

CSS

.div1 { 
    border: 1px solid red;
    float: left;
    width: 20px;
}
.div2 {
    border: 1px solid green;
    width: 50px;
    margin-left:20px;
}
.container{
}

Answer 3

这就是我要做的。在所有当前div周围创建一个div，然后使用css定位编辑div中的长度。

这是一个例子， http://jsfiddle.net/tjgerot/v2469Leu/

<div class="table">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div2">3</div>
</div>

显示包含rowpans的表格之类的div

3 个答案: