Создание универсального HTML элемента/виджета

@Antiplayer · Регистрация: 27.09.2012

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

Вопрос такой. Хочу сверстать виджет(или не знаю как назвать), который бы мог вставляться на любой сайт в сети. Хотелось бы, чтобы он был фиксированного размера, например 64х64px и этот размер бы не менялся никогда. А внутри него три дива, которые должны располгаться подобным образом, как во вложении. Заранее спасибо.

@Omion · 20.07.2018, 09:50

Сообщение от Antiplayer

который бы мог вставляться на любой сайт в сети.

Вставляться как он будет? Каким методом ты его интегрируешь на сайт любой?

@master114 · 20.07.2018, 09:54

HTML5

<html>
<head>
    <style>
        
        .wrap {
            width: 64px;
            height: 64px;
            background: red;
        }
 
        .right-col {
            float: right;
            width: 50%;
            height: 100%;
            background: green;
        }
        
        .top-col {
            height: 50%;
            background: orange;
        }
        
        .bottom-col {
            height: 50%;
            background: purple;
        }
        
        .clearfix {
            content: "";
            display: table;
            clear: both;
        }
    </style>
    
</head>    
<body>
<div class="wrap clearfix">
    <div class="right-col">
    </div>
    <div class="top-col">
    </div>
    <div class="bottom-col">
    </div>
</div>
</body>
</html>

навскидку
размеры можете подставить свои
всякие обнуления стилей не делал
фоновый цвет оставил для наглядности

Добавлено через 1 минуту
хотя виджеты для вставки наверное лучше на JS делать

@Antiplayer · 20.07.2018, 10:14 **[ТС]**

Omion, master114, создаваться он будет JS кодом, но за верстку отвечать css файл, который также будет инжектироваться на сайт. То есть, если очень грубо:

Javascript

    let newDiv = document.createElement("div");  //как основной контейнер для остальных дивов
    let firstDiv = document.createElement("div");
    let secondDiv = document.createElement("div");
    let thirdDiv = document.createElement("div");
        
    newDiv.className = "newDiv";
    newDiv.append(firstDiv, secondDiv, thirdDiv);
    
    document.body.append("newDiv");

Речь идет про расширение Chrome, и мне надо на некоторые сайты свои кнопочки вставить. Точнее, я все уже вставил и все работает, вот с версткой проблемы

@Omion · 20.07.2018, 10:19

master114, я тебя не осуждаю конечно, но есть flexbox

@Antiplayer 129 / 112 / 39 Регистрация: 27.09.2012 Сообщений: 305
		1
	Создание универсального HTML элемента/виджета 20.07.2018, 09:25. Показов 481. Ответов 4 Метки нет (Все метки) Вопрос такой. Хочу сверстать виджет(или не знаю как назвать), который бы мог вставляться на любой сайт в сети. Хотелось бы, чтобы он был фиксированного размера, например 64х64px и этот размер бы не менялся никогда. А внутри него три дива, которые должны располгаться подобным образом, как во вложении. Заранее спасибо. Изображения 0

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 351
	20.07.2018, 09:50	2
	Сообщение от Antiplayer который бы мог вставляться на любой сайт в сети. Вставляться как он будет? Каким методом ты его интегрируешь на сайт любой? 0

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 351
	20.07.2018, 10:19	5
	master114, я тебя не осуждаю конечно, но есть flexbox 1

Опции темы