2014-05-29 3 views
-2

У меня есть HTML-файл с одного главного DIVОтображение содержимого HTML в ряды вертикально

<body><div id="main">.....</div></body 

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

Есть ли какой-нибудь css для этого?

+1

Вы можете оставить скрипку и кода HTML CSS пожалуйста? –

+0

Это обычная проблема. Вы хотя бы искали какое-то решение или что-то пробовали? Есть несколько способов сделать это. –

ответ

1

Может быть, вы могли бы использовать таблицу

<div id="main"> 
<table> 
    <tr class="DataRow"><p>Content</p></tr> 
    <tr class="DataRow"><p>Content2</p></tr> 
    <tr class="DataRow"><p>Content3</p></tr> 
    <tr class="DataRow"><p>Content4</p></tr> 
    <tr class="DataRow"><p>Content5</p></tr> 
</table> 

CSS

.DataRow{ 
padding: 10px; 
border: 1px solid black; 

}

Надеется, что это помогает

+0

У меня нет контроля над тем, что находится внутри моего основного подразделения. Я не могу разделить их вручную, так как у меня много html-файлов. Поэтому я не знаю, сколько строк каждый html-файл будет разделен на. Мне нужно поведение таблицы, но я не хочу делать это вручную. Это нужно что-то в css, как многоколоночный макет, но в противоположном направлении. Разметка в нескольких столбцах разбивает html на столбцы по горизонтали с промежутком между ними, я хочу сделать то же самое, но вертикально, если возможно – Mahag

0

с верхней части головы, возможно, ниже может указать вас в правильном направлении? просто граница и некоторые дополнения? По тегам Div по умолчанию являются блочные элементы, а это означает, что они находятся на новой линии в любом случае (это может быть изменения через CSS)

, чтобы разделить содержание, вам нужно будет использовать код JavaScript

str.length() и разделить эту величину 2 в массив, и место [0] в Div 1 и [1] в Div 2

JQuery: -

$("#row1").text([0]) 
$("#row2").text([1]) 

CSS-

<style type="text/css"> 
.row { border:solid 1px #000; padding:5px } 
</style> 

<div id="main"> 
    <div id="row1" class="row">Content row 1</div> 
    <div id="row2" class="row">Content row 2</div> 
</div> 
Смежные вопросы