Я пытаюсь отобразить 3 деления в одной строке. Разработка в Drupal8 Bootstrap Theme (работа над подтемой). Эти Div являются полями внутри представления, называемого viewproducts.
Дивы следующие:
1) Juicebox Photo Gallery;
2) Текст: «Заголовок» + «Ссылочная метка:» & «Ссылочный номер» + «Описание» + «Ценовая метка» и «Цена»;
3) Веб-форма: «Имя и Фамилия» + «Электронная почта» + «Телефон» + «Сообщение» + «Кнопка отправки»
Идея состоит в том, чтобы иметь строки продуктов, каждая из которых состоит из элементов, описанных выше, в следующем порядке на экране:
ВЛЕВО: Juicebox Gallery CENTER: Текстовая группа элементов. Справа: Webform
Галерея = Ok;
Текстовая группа; Как обратиться ко всем элементам, чтобы привести их в центр, но соблюдая указанный порядок;
Webform; Как обращаться ко всем элементам, чтобы привести их в центр, но поддерживать его порядок в веб-форме, если я не могу (или не хочу / не хочу) получить доступ к HTML;
Я уже запутался после стольких тестов, что у меня может быть ненужный код ниже. Спасибо всем за вашу помощь. Попробовано с относительным положением, без него абсолютное не работает, так как каждый элемент выровнен друг над другом! Etc..Etc..Etc ..
ТАК ниже имен классов из указанных элементов:
Галерея Juicebox: "viewimagefield"
Текстовая группа:
Название статьи: «viewtitlelabel» и «viewtitlefield»
Ссылка на статью: «viewreflabel» и «viewrefrield»
Описание статьи: "viewdescriptionfield"
Цена товара: "viewpricelabel" и "viewpricefield"
Webform class = "viewform":
Имя и Фамилия: «prodformname»
электронная почта: "prodformemail"
телефон: "prodformphone"
сообщение: "prodformmessage"
отправить: "prodformbutton"
.viewproducts ul {
list-style-type:none;
align-content: flex-start;
}
.viewproducts .view-content .views-row{
float: left;
height:50% !important;
margin: ;
}
.viewproducts .view-content .viewimagefield{
float: left;
width:40% !important;
margin: 0;
border-radius: 10%;
}
.viewproducts .view-content .viewtitlelabel,.viewproducts .view-content .viewtitlefield{
position: relative;
top:50% !important;
left:50% !important;
background-color: transparent;
}
.viewproducts .view-content .viewreflabel,.viewproducts .view-content .viewreffield{
position: relative;
top:45% !important;
left:40% !important;
display: inline-block;
margin-right: 1%;
}
.viewproducts .view-content .viewdescriptionfield{
position: relative;
word-wrap: break-word;
margin-top: 1%;
max-width: 80%;
}
.viewproducts .view-content .viewpricelabel,.viewproducts .view-content .viewpricefield{
position: relative;
display: inline-block;
margin-right: 1%;
}
.viewproducts .view-content .viewform{
top:18% !important;
left:20% !important;
}
.juicebox-container{
position: relative !important;
float: left !important;
left: 1% !important;
width: 100% !important;
border-radius: 10%;
}
.prodformname, .prodformemail, .prodformphone, .prodformmessage, .prodformabout, .prodformbutton{
position: relative !important;
display: inline-block;
float: left !important;
top: 1% !important;
left: 70% !important;
width: 30% !important;
content: "";
clear: both;
}
Вывод - Галерея слева, Текст в центре, но смещенный, а некоторые позади галереи. Форма ниже как и элементы inline, ниже и т. Д. Я не могу понять конкретный порядок здесь :(
Просто идея того, что происходит на картинке ниже:
введите описание изображения здесь
здесь скрипка В HTML много информации (учтите, что я не хочу менять html, так как я работаю с платформой Drupal, а не html-кодированием напрямую)