0

我在盒子里做了一张桌子。默认情况下，表格在框内居中，但我希望它接触框的底部边框。我连续有两个单元格，两个单元格都有我需要让它们接触底部边框的图片。

<html>
<head>
    <link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="box1">      
        <table width="614" border="0" cellspacing="0" cellpadding="0">
            <tr align="center">
                <td>                        
                    <img src="TL.png">
                </td>
                <td width="1" class="vertical"></td>
                <td>
                    <img src="TR.png">
                </td>                   
            </tr>
        </table>
    </div>
</body>


.box1{      
width: 614px;   
margin: 0px;
position:absolute;
border: 1px solid #d0d0d0;
padding: 20px;
border-radius: 20px 20px 20px 20px;
overflow: auto;}
.vertical{
border-right: 1px solid #d0d0d0;
width: 0px; 
height: 250px;
float: left;
box-shadow: 1px 1px 0px #ffffff;}

有人可以解释一下吗？

4

1 回答 1

1

其原因padding在于.box1.

由于当前值为padding : 20px，因此这适用20px于所有边。如果您不想要padding底部，请将其更改为：

padding : 20px 20px 0; /* padding : top left-right bottom */

CSS：

.box1 {      
    width: 614px;   
    margin: 0px;
    position:absolute;
    border: 1px solid #d0d0d0;
    padding: 20px 20px 0;
    border-radius: 20px 20px 20px 20px;
    overflow: auto;
}

检查此JSFiddle以进行演示。

编辑：
要动态设置高度.vertical，请使用此 jQuery：

$('.vertical').each(function () {
    var currentLine = $(this),
        prevImgHeight = currentLine.prev('td').find('img').height(),
        nextImgHeight = currentLine.next('td').find('img').height(),
        lineHeight = (prevImgHeight > nextImgHeight) ? prevImgHeight : nextImgHeight;

    currentLine.css('height', lineHeight + 'px');
});

这将设置height行的等于两个相邻的较大的img

于 2013-09-25T05:31:57.907 回答