0

箱の中にテーブルを作りました。デフォルトでは、テーブルはボックスの中央に配置されていますが、ボックスの下の境界線に触れたいです。2 つのセルが連続しており、両方とも下の境界線に触れるようにする必要がある写真があります。

<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 : 20pxa が適用されます。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を確認してください。

編集:
の高さを動的に設定するには、次の.verticaljQuery を使用します。

$('.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により、ラインの値が隣接する 2 つの値の大きい方に設定されます。img

于 2013-09-25T05:31:57.907 に答える