Question

我正在尝试在同一行中显示3个div。在Drupal8 Bootstrap主题中开发（在Subtheme上工作）。这些Divs是视图内称为viewproducts的字段。 div如下： 1）果汁盒图片库； 2）文字：“标题” +“参考标签：”和“参考编号” +“描述” +“价格标签”和“价格”； 3）Webform：“名字和姓氏” +“电子邮件” +“电话” +“消息” +“发送按钮”

该想法是使产品行，每一行由上述元素按屏幕中的以下顺序形成：

左：Juicebox Gallery中心：元素的文本组。右：Webform

图库=好; 文字组；如何解决所有要素，使它们成为中心，但保持指定的顺序；网络表格假设我无法（或不想/不需要）访问HTML，如何处理所有元素以使其居中，但如何保持Webform的顺序；

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

在指定元素的类名称下面

SO：果汁盒画廊：“ viewimagefield” 文字组：文章标题：“ viewtitlelabel”和“ viewtitlefield” 文章参考：“ viewreflabel”和“ viewrefrield” 文章描述：“ viewdescriptionfield” 商品价格：“ viewpricelabel”和“ viewpricefield”

Webform class =“ viewform”：名和姓：“ prodformname” 电子邮件：“ prodformemail” 电话：“产品电话” 讯息：“ 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中有很多信息（请注意，由于我使用的是Drupal框架，而不是直接进行html编码，因此我不想更改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来获得相似的结果

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

1 个答案: