在同一行中显示 3 个 div(图片库 + 文本 + 网络表单)

Question

我试图在同一行中显示 3 个div。在Drupal8 Bootstrap Theme中开发(在子主题上工作)。这些 Div 是名为视图产品的视图中的字段。

div 如下：

1. 果汁盒照片库;
2. 文本："Title"+"Reference Label:" & "Reference number"+ "Description" + "Price Label" & "Price";
3. 网络表单："First and Last Name"+ "Email" + "Phone" + "Message" + "Send Button"

这个想法是有产品行，每一行由上述元素在屏幕中按以下顺序形成：

LEFT: Juicebox Gallery          CENTER: Text group of elements          RIGHT: Webform

图库=确定;

文本组;如何解决所有元素以将它们带到中心，但保持指定的顺序;

网络表单;如何解决所有元素以将它们带到中心，但假设我不能(或不想/不需要)访问 HTML，保持它的网络表单顺序;

经过这么多测试，我已经感到困惑，以至于我可能在下面有不必要的代码。谢谢大家的帮助。尝试使用相对位置，没有它，绝对不起作用，因为它的每个元素都彼此对齐！等。。等。。等。。

SO 以下类名来自指定元素：

• 果汁盒画廊："viewimagefield">

• 文本组：

  文章标题："视图标题
  • 标签"和"视图标题字段">
  • 文章参考："viewreflabel"和"viewrefrield">
  • 文章描述："视图描述字段">
  • 文章价格："查看价格标签"和"查看价格字段">

• Webform class="viewform"： -名字和姓氏："产品名称">

  • 电子邮件："产品电子邮件">
  • 电话："产品电话">
  • 消息："产品消息">
  • 发送："产品按钮">

.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;
}

输出是左侧的图库，中间的文本但未对齐，还有一些在图库后面。在两者下方形成，元素内联，在下面等。我无法理解这里的特定顺序:( 只是对下图中发生的事情的一个想法： 在此处输入图像描述

这是小提琴 HTML 中有很多信息(请注意，我不想更改 html，因为我使用的是 Drupal 框架而不是直接进行 html 编码)

Answer 1

您可以使用 Bootstrap 网格系统完成此操作：

<div class="row">
<div class="col-4"> 
//Left section 
</div> 
<div class="col-4">
//Center section 
</div> 
<div class="col-4">
//Right section 
</div> 
</div>

这将在同一行中为您提供相同宽度的部分。

我建议你看看Bootstrap Grid System

通过使用 CSS 将float:left;应用于每个div，您可能可以获得类似的结果