Question

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

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

有人可以解释一下吗？

Answer 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

中的较大者

表内容保证金

1 个答案: