Моделирование таблицы Layout в CSS

Для всех моих сайтов до сих пор я использовал раскладки таблиц, но теперь я хочу попробовать использовать чистую CSS-макет. Но я действительно борется!Моделирование таблицы Layout в CSS

Как я могу эмулировать следующее CSS:

<table> 
    <tr> 
    <td>Some Content 1</td> 
    <td>Some Content 2</td> 
    </tr> 
</table>

Теперь давайте предположим, что "Некоторые Содержание 1" и "Некоторые Content 2" вместо <img> метки. Затем результирующий вывод представляет собой два изображения бок о бок с центрированным вертикальным выравниванием. Размер двух ячеек в таблице - это размер изображений плюс несколько дополнений.

Таким образом, таблица автоматически подбирается под размер изображений или любого содержимого внутри ячеек.

Но как это сделать в CSS, это сводит меня с ума! Я почти готов отказаться и просто использовать макет таблицы, и почему бы и нет, это так просто.

Любые предложения с благодарностью получены.

Спасибо,

источник

2010-01-05 AJ.

Просто хотел сказать удачу, вам это нужно. –

Я не вижу смысла использовать «чистый CSS». Что не так с использованием таблиц здесь? вам просто нужно поместить макет таблиц в css (margin, padding, границы и т. д.). –

Я пытаюсь сделать именно то, что вы хотите сделать, в течение последних двух лет. И никогда не удалось имитировать поведение таблицы. Если бы кто-то мог ответить на этот вопрос, это был бы «большой вопрос, решаемый тайной»! – Nirmal

Единственный способ, которым я вижу, что вы можете сделать это в противном случае использует <div> теги и установки их свойств, таких как поплавок в CSS.

Я не думаю, что вы можете создать таблицу в CSS, поскольку CSS определяет стиль страницы и ее элементы, а не сами элементы.

источник

2010-01-05 12:28:51

Подобный макет может быть сгенерирован с использованием тегов CSS и div.

В настоящее время существует множество инструментов для построения такого макета с использованием CSS. Все современные средства разработки веб-страниц имеют эти особенности.

Помимо этих инструментов, таких как Yahoo Grid Builder (link to Yahoo Grid builder), также может быть удобно для них.

источник

2010-01-05 12:29:39

Это работает в Firefox (не тестировалось в других браузерах). Границы просто для иллюстрации.

<div> 

<div style="float:left; width:49%;border:1px solid black;"> 
    <img style="float:right; width:343px" src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/> 
</div> 

<div style="float:right; width:49%;border:1px solid black;"> 
    <img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/> 
</div> 

</div>

Ваш вопрос немного неоднозначный (может быть, это я), но вы также можете означать следующее:

<div> 

<div style="float:left; width:49%; border:1px solid black;"> 
    <div style="margin:auto; width:343px; border:2px solid red;" > 
     <img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/> 
    </div> 

</div> 

    <div style="float:left; width:49%; border:1px solid black;"> 
    <div style="margin:auto; width:343px; border:2px solid red;" > 
     <img src="http://www.virginia.edu/german/images/Berlin-City2.jpg"/> 
    </div> 
    </div> 
</div>

Это не удовлетворяет все ваши требования, но близко.

источник

2010-01-05 12:30:18

Я не думаю, что два DIVs будут вертикально выровняться по середине, как если бы они были столбцами таблицы. – Nirmal

Спасибо за ответ, но у меня сложилось впечатление, что плавающий div должен иметь фиксированную ширину. Хотя браузеры поддерживают float без ширины, я не думаю, что это часть стандарта CSS. –

Я исправил свой ответ, чтобы отразить это. Попробуйте еще раз и сообщите мне, если это сработает для вас. –

Затем результирующий выход представляет собой два изображения бок о бок с центрированным вертикальным выравниванием. Размер двух ячеек в таблице - это размер изображений плюс несколько дополнений.

Вы имеете в виду что-то вроде этого?

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2005928</title> 
     <style> 
      #images img { 
       padding: 10px; 
       vertical-align: middle; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="images"> 
      <img src="http://sstatic.net/so/img/logo.png" width="100" height="50"> 
      <img src="http://sstatic.net/so/img/logo.png" width="50" height="100"> 
     </div> 
    </body> 
</html>

источник

2010-01-05 12:31:27 BalusC

И как добавить еще одну строку, которая выравнивает и ведет себя как таблица? – Nirmal

Это другой вопрос. Задайте новый вопрос. – BalusC

Меняйте table, tr и td теги для div-х и сделать 'TD-дивы' float:left. Или используйте display:inline-block (со всеми связанными проблемами) или используйте display:table-cell (со всеми связанными проблемами).

источник

2010-01-05 12:36:07

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

Ваш другой выбор - жонглировать большим количеством хаков и получить запасной ключ F5 для тестирования.

источник

2010-01-05 12:50:23

Для того, чтобы элемент вести себя, как таблицы с использованием чистого CSS, используйте display свойства и значения table, table-row, table-cell, inline-table и т.д.

Это не поддерживается IE, и несколько поражений цели не использовать таблицы для раскладки столбцов, поскольку разметка все еще основана на строках.

источник

2010-01-05 15:06:37

Забудьте о концепции «или» с помощью CSS и таблиц. У обоих есть плюсы и минусы, которые приведут вас к стене.

Я говорю, создаю столько, сколько вы можете с помощью CSS, другие макеты, которые у вас есть, используйте таблицу.

Кроме того, между сетчатыми системами и модулем TABLE-LAYOUT и модулем шаблона CSS3 CSS действительно продвигается в сторону «табличного» макета.

источник

2010-01-05 16:07:22 tahdhaze09

Моделирование таблицы Layout в CSS

ответ

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