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

Question

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

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，如何处理所有元素以将它们带到中心但保持其网络表单顺序；

经过这么多测试，我已经很困惑了，下面可能有不必要的代码。感谢你的帮助。尝试使用相对位置，没有它，absolute 不起作用，因为它的每个元素都相互对齐！等等..等等..等等..

SO 下面来自指定元素的类名：

• Juicebox 库：“viewimagefield”

• 文本组：

  • 文章标题：“viewtitlelabel”和“viewtitlefield”
  • 文章参考：“viewreflabel”和“viewrefrield”
  • 文章描述：“viewdescriptionfield”
  • 商品价格：“viewpricelabel”和“viewpricefield”

• 网络表单 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 来获得类似的结果