#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 для разработки, если это поможет.