Блог

Главная - Вопросы по программированию - Получение таблиц CSS только для работы с картинками

Получение таблиц CSS только для работы с картинками

#css #responsive-design #css-tables

Вопрос:

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

 picture|text
text   |picture
picture|text
text   |picture

Это основные части файлов, которые я использую. Я временно связался с картинкой в Википедии, чтобы задать этот вопрос.

 
<html>
<head>
<link href="tables-etc2.css"  media="screen and (min-width: 900px)"  rel="stylesheet" type="text/css" title="stylesheet">
</head>
<body>
<link href="tables-etc2.css"  rel="stylesheet" type="text/css" title="stylesheet">
<div class="table">
  <div class="table-row">
    <div class="table-cell"><image src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Parliament_at_Sunset.JPG/320px-Parliament_at_Sunset.JPG ">
    </div>
    <div class="table-cell">
           This is some text I want to display directly opposite the picture.
    </div>
  </div>
 
 
</div>

И файл CSS

 .table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  table-layout: auto;
  width: 500px;
  display: table-cell;
  padding: 10px;
}

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

Метки: