在同一行显示3个div（图库+文本+ Webform）

Question

我试图在同一行显示3个div。在Drupal8 Bootstrap主题中开发（使用Subtheme）。这些Div是视图中名为viewproducts的字段。 div如下：1）Juicebox Photo Gallery; 2）文本：“标题”+“参考标签：”和“参考编号”+“描述”+“价格标签”和“价格”; 3）Webform：“名字和姓氏”+“电子邮件”+“电话”+“消息”+“发送按钮”

我们的想法是拥有产品行，每行由屏幕中按以下顺序由上述元素组成：

左图：Juicebox Gallery CENTER：文本组元素。右：网络表单

画廊= OK;文字组;如何解决所有要素，将它们带到中心但保持指定的顺序;网上表格;假设我不能（或不想/不需要）访问HTML，如何解决所有元素将它们带到中心但保持它的webform顺序;

经过如此多的测试后我已经感到困惑，以至于下面我可能会有不必要的代码。感谢你的帮助。尝试相对位置，没有它，绝对不起作用，因为它是彼此对齐的每个元素！ Etc..Etc..Etc ..

因此来自指定元素的类名称：Juicebox gallery：“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;
}

输出是左边的图库，中心的文字但不对齐，有些在画廊后面。表格下面和内联，下面等元素我在这里无法理解具体的顺序:(只是想法下面的图片中发生了什么：enter image description here

这里的fiddle 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，您可以获得类似的结果