Охват содержимого таблицы

Я сделал стол внутри коробки. По умолчанию таблица находится внутри поля, но я хочу, чтобы она коснулась нижней границы поля. У меня две ячейки подряд, и у обоих есть фотографии, которые мне нужно сделать, чтобы они касались границ внизу.Охват содержимого таблицы

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

Может кто-нибудь объяснить, пожалуйста?

источник

2013-09-24 Alex

Раствор, является изменение вашего кода, пока он не будет работать правильно. –

Дело в том, что я делаю шаблон, где будут изображения различных размеров. Регулировка полей для каждого изображения/текста каждый раз занимает слишком много времени. Я спрашиваю, есть ли какой-либо быстрый способ поместить всю таблицу или, по крайней мере, строки, но не каждую ячейку в то время. – Alex

Пожалуйста, напишите какой-то код ... ответить невозможно, как сейчас. Лучше, если вы создадите скрипку с образцами, взятыми из Google. –

Его из-за 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-25 05:31:57

Спасибо, теперь работает для меня! Но теперь моя коробка получает боковой слайдер из-за высоты содержимого. Как я могу определить высоту для динамического изменения содержимого коробки? – Alex

Что вы подразумеваете под боковым слайдером? Поскольку 'height' не указан для' .box1', он автоматически примет высоту содержимого. –

К сожалению, я добавил, что после того, как я разместил код. У меня есть вертикальная линия для разделения двух ячеек. Но высота: 100%; не будет работать, поскольку он должен получить значение от родителя. У меня будет много разных ящиков на моей странице с различным контентом, и я хочу, чтобы это было динамично, поэтому мне не нужно иметь дело с указанием размера все время. Как получить эту строку и поле для динамического рисования? – Alex

Охват содержимого таблицы

ответ

Смежные вопросы