Позиционирование таблицы и текста относительно картинки

@newlam · Регистрация: 06.05.2013

Author24 — интернет-сервис помощи студентам

Нужно сделать чтобы картинка располагалась по центру, а справа от нее располагалась таблица. Снизу под картинкой текст. (как на рисунке).

По центру картинка, справа от картинки таблица (небольшая), а ровно под картинкой текст.
Если я ставлю картинке стиль align:left , то таблица справа правильно позиционируется, а картинка улетает в лево (не остается в центре). Если не ставлю align:left, то таблица отображается по центру под картинкой (а не справа, как на рисунке)
Это вообще можно реализовать?

Желательно без calc()

@thedude · 07.01.2017, 10:56

https://jsfiddle.net/heo52kog/

HTML5

<div class="content">
<img src="https://counter-strike.com.ua/uploads/images/logos_download/zoro-logo/screen1.png"/>
<table>
<tr><td>1 ячейка</td><td>2 ячейка</td></tr>
<tr><td>.....</td><td>.....</td></tr>
</table>
<p class="clearfix">
Тут находится очень важный текст, который нельзя читать Тут находится очень важный текст, который нельзя читать
</p>
</div>

CSS

table {border:2px solid black;}
img {float:left; width:200px;}
.clearfix {clear:both;}
.content {width:350px; margin:0 auto;}

Новые блоги и статьи
Какая разница между операторами == и === в сравнениях в JavaScript bytestream 21.01.2025 В мире веб-разработки JavaScript занимает особое место как динамический язык программирования, предоставляющий разработчикам широкий набор инструментов для создания интерактивных веб-приложений. . . .	Из чего и как собрать свой домашний кинотеатр bt_guru 21.01.2025 Создание домашнего кинотеатра: от идеи до реализации В современном мире домашний кинотеатр стал неотъемлемой частью комфортного жилого пространства, предоставляя возможность наслаждаться. . .	Ошибки стиральных машин bt_guru 21.01.2025 Современные стиральные машины представляют собой сложные электронные устройства, оснащенные множеством датчиков и систем контроля. Они способны самостоятельно определять вес загруженного белья,. . .	Копирование (маппинг) объектов в JavaScript bytestream 21.01.2025 В современной разработке программного обеспечения копирование объектов представляет собой фундаментальную операцию, которая требует особого внимания и понимания. Маппинг объектов в JavaScript – это. . .	Как работать с Apache Kafka в C# .NET bytestream 21.01.2025 Apache Kafka представляет собой распределенную платформу потоковой передачи данных, которая произвела революцию в области обработки больших объемов информации в реальном времени. Эта система,. . .	Как использовать RabbitMQ в C# .NET bytestream 21.01.2025 RabbitMQ представляет собой мощный брокер сообщений, который эффективно решает эту задачу, обеспечивая надежную передачу данных между множеством приложений. Этот инструмент реализует протокол AMQP. . .
Как объединить последние коммиты в Git bytestream 21.01.2025 В мире разработки программного обеспечения система контроля версий Git стала незаменимым инструментом для управления исходным кодом. Одной из наиболее полезных, но порой сложных для освоения функций. . .	Как запушить новую локальную ветку (branch) в удалённый репозиторий Git и отслеживать её bytestream 21.01.2025 В современной разработке программного обеспечения система контроля версий Git стала неотъемлемым инструментом для эффективного управления кодом и организации командной работы. Одной из ключевых. . .	Как создать директорию и все родительские директории, указанные в пути, с помощью Python bytestream 21.01.2025 Python предоставляет мощные инструменты для работы с файловой системой через встроенные модули os и pathlib, которые значительно упрощают процесс манипуляции директориями. Эти модули содержат. . .	Как работать с массивами в JavaScript bytestream 21.01.2025 Массивы в JavaScript представляют собой один из фундаментальных типов данных, который позволяет хранить упорядоченные коллекции различных элементов в одной переменной. Эта структура данных является. . .	Какая максимальная длина адреса (URL) в различных браузерах и стандартах bytestream 21.01.2025 В современном мире интернет-технологий URL-адреса (Uniform Resource Locator) играют фундаментальную роль в функционировании веб-пространства. Эти уникальные идентификаторы ресурсов стали неотъемлемой. . .	Как сбросить локальный репозиторий до состояния удалённого репозитория Git bytestream 21.01.2025 При разработке программного обеспечения с использованием системы контроля версий Git разработчики часто сталкиваются с необходимостью синхронизации локального и удаленного репозиториев. Данная задача. . .

@newlam 2 / 2 / 1 Регистрация: 06.05.2013 Сообщений: 34
		1
	Позиционирование таблицы и текста относительно картинки 07.01.2017, 10:22. Показов 2606. Ответов 1 Метки нет (Все метки) Нужно сделать чтобы картинка располагалась по центру, а справа от нее располагалась таблица. Снизу под картинкой текст. (как на рисунке). По центру картинка, справа от картинки таблица (небольшая), а ровно под картинкой текст. Если я ставлю картинке стиль align:left , то таблица справа правильно позиционируется, а картинка улетает в лево (не остается в центре). Если не ставлю align:left, то таблица отображается по центру под картинкой (а не справа, как на рисунке) Это вообще можно реализовать? Желательно без calc() Миниатюры 0

	07.01.2017, 10:56

Позиционирование таблицы и текста относительно картинки

Решение