HTML-ДИВА Таблица с гибкой высотой/ширин

В настоящее время у меня есть таблица HTML, который выглядит как:HTML-ДИВА Таблица с гибкой высотой/ширин

---COLM1---|---COLM2---|---COLM3--- 

data1   smalldata 

data 2 

data 3 

NEW ROW 1  NEW ROW 2

Новая строка 1 показывает новую строку для столбца один прямо под самым длинным содержанием, но для строки 2 I хотите, чтобы он отображался прямо под небольшими данными.

Код я в настоящее время, который работает для этого примера, но не для того, что я хочу это:

/**-- 3 Column Table Using Divs 
Each Column can be any length 
--**/  
.divTable{ 
width: 100%; 
} 
.divTableArticle{ 
display: inline-block; 
vertical-align: top; 
width: 23%;      
} 

.divTableRow{ 
clear: left; 
padding-top: 15px; 
margin-bottom: 10px; 
}

И HTML отвечает:

<div class="divTable"> 
<!--AS MANY ROWS--> 
     <div class="divTableRow"> 
      <!---AS MANY ARTICLES---> 
      <div class="divTableArticle"></div> 
     </div> 
</div>

Как я могу изменить свой код, чтобы соответствовать моим новые требования?

Как я сейчас перечисляю данные каждой строки, было бы лучше перечислять данные каждого столбца?

JS Fiddle: Click Here

источник

2013-04-03 LmC

использование перенос слов: брейк-слова; свойство, поэтому большие данные будут отправлены на следующую строку, не забудьте сначала установить некоторую ширину. – user1370510

Попробовал ваше предложение: http://jsfiddle.net/C7jZT/ Doenst, похоже, имеет какое-либо влияние – LmC

В примере с JS Fiddle, что это такое 'smallData' вы хотите, чтобы ваша новая строка была выровнена? И что это за 'строка 2'? – micadelli

Если эти статьи являются независимыми, и не могут быть связаны (например, 2012 и 2007 в качестве одной пары.) Я думаю, что это не возможно без их позиционирования (т.е. с помощью JS или JQuery.). Но для simplyfied HTML и CSS это ближе всего один мне удалось получить (который действительно doens't работу, как вы хотите):

<div class="divTable"> 
    <div class="divTableArticle"></div><!-- Needed for removing whitespace 
--><div class="divTableArticle"></div> 
</div> 

.divTableArticle{ 
    display: inline-block; 
    width: 33.3333%; 
    float: left; 
}

JS Fiddle

источник

2013-04-03 10:08:29 micadelli

HTML-ДИВА Таблица с гибкой высотой/ширин

ответ

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