Html 如何将div元素相邻放置？

我是CSS的初学者。在JSP页面中，我有两个div，它们位于彼此下面。每个div包含一个字段、按钮和一个表。我需要将字段、表格和按钮放在一起，而不是放在一起。下面是我的两个div的JSP。如何实现我想要的

第一组：

            <div class="panel panel-default">
            <div class="panel-heading"><b><spring:message code="supportive.criterea.section.label"/></b></div>
            <div class="panel-body ">

                <div class="form-group col-lg-3 col-xs-12 float2">
                  <c:forEach items="${serviceFields}" var="serviceField">
                     <c:if test="${serviceField.columnName == 'v38'}">
                         <label for="criterea"> 
                              <c:choose>
                                <c:when test="${i18n.language == 'en' }">${serviceField.labelEn}</c:when>
                                <c:otherwise>${serviceField.labelAr}</c:otherwise>
                              </c:choose>
                                    <c:if test="${serviceField.isRequired == 1}">
                                        <span class="required">&nbsp;</span>
                                    </c:if> 
                               </label>
                         <input type="text" value="${requestDetails.v38}"                       
                            class="form-control input-sm <c:if test="${serviceField.isRequired == 1 && step.isStart == 1}"> mandatory</c:if>"  
                            name="v38" id="criterea" <c:if test="${step != null && step.isStart != 1}"> disabled</c:if> />
                     </c:if>
                  </c:forEach>
              </div>


              <div class="col-lg-2 col-xs-12 float2" style="padding-top: 20px;">
                        <label for="add">&nbsp;</label>
                        <label class="btn-is">
                            <img class="docIcon" src="${pageContext.request.contextPath}/images/icons/buttons/add-request.png" />&nbsp;<spring:message code="addToList.label"/>
                            <input type="button" id="add_criterea" class="col-xs-12 col-lg-5 col-md-6" <c:if test="${step != null && step.isStart != 1}"> disabled</c:if> style="display: none;"/>
                        </label>
             </div>

            <div class="form-group col-lg-6 col-xs-12 float2" id="jobSuccessionListDiv">
                <jsp:include page="../../common/career-replacement-list.jsp"/>
            </div>



            </div>
            </div>

${serviceField.labelEn}
${serviceField.labelAr}

第二组

    <div class="panel panel-default">
    <div class="panel-heading"><b><spring:message code="required.tasks.label"/></b></div>
    <div class="panel-body">


      <div class="form-group col-lg-3 col-xs-12 float2">
          <c:forEach items="${serviceFields}" var="serviceField">
             <c:if test="${serviceField.columnName == 'v39'}">
                 <label for="tasks"> 
                      <c:choose>
                        <c:when test="${i18n.language == 'en' }">${serviceField.labelEn}</c:when>
                        <c:otherwise>${serviceField.labelAr}</c:otherwise>
                      </c:choose>
                            <c:if test="${serviceField.isRequired == 1}">
                                <span class="required">&nbsp;</span>
                            </c:if> 
                       </label>
                 <input type="text" value="${requestDetails.v39}"                       
                    class="form-control input-sm <c:if test="${serviceField.isRequired == 1 && step.isStart == 1}"> mandatory</c:if>"  
                    name="v39" id="tasks" <c:if test="${step != null && step.isStart != 1}"> disabled</c:if> />
             </c:if>
          </c:forEach>
      </div> 


      <div class="col-lg-2 col-xs-12 float2" style="padding-top: 20px;">
                <label for="add">&nbsp;</label>
                <label class="btn-is">
                    <img class="docIcon" src="${pageContext.request.contextPath}/images/icons/buttons/add-request.png" />&nbsp;<spring:message code="addToList.label"/>
                    <input type="button" id="add_task" class="col-xs-12 col-lg-5 col-md-6" <c:if test="${step != null && step.isStart != 1}"> disabled</c:if> style="display: none;"/>
                </label>
     </div>

    <div class="col-lg-12 col-xs-12" id="jobSuccessionListDiv_1">
        <jsp:include page="../../common/career-replacement-list-1.jsp"/>
    </div>



    </div>      

    </div>      

${serviceField.labelEn}
${serviceField.labelAr}

创建一个容器div，您的两个div都位于其中。此div需要具有

显示：flex

和

灵活方向：row

：

---

另一种解决方案是，向两个div添加

display:inline block

，创建一个容器div，其中包含两个div。此div需要具有

显示：flex

和

灵活方向：row

：

<div class="d-flex">
   <div class="innerDiv"></div>
   <div class="innerDiv"></div>
</div>
<style>
.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}`
.innerDiv {
   padding-left: 15px;
   padding-right:15px;
}

</style>

另一个解决方案是，向两个div添加

display:inline block

<div class="d-flex">
   <div class="innerDiv"></div>
   <div class="innerDiv"></div>
</div>
<style>
.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}`
.innerDiv {
   padding-left: 15px;
   padding-right:15px;
}

</style>

d-flex{ 显示：-网络工具包盒； 显示：-ms flexbox； 显示器：flex； -ms-flex-wrap:wrap； 柔性包装：包装； 右边距：-15px； 左边距：-15px； }` .innerDiv{ 左侧填充：15px； 右侧填充：15px； }

d-flex{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
右边距：-15px；
左边距：-15px；
}`
.innerDiv{
左侧填充：15px；
右侧填充：15px；
}

谢谢您的帮助。他们现在紧挨着对方，但高度不同，场地有点错失了。你能建议如何正确放置它们吗？谢谢请在我的问题中查看他们现在的样子。我更新了它。这可能是因为你的宽度有点太小了，无法将它们按全尺寸对齐：我不知道，你正在使用引导。尝试在容器上使用

行

类，而不是使用两个css属性。如果您希望它们具有相同的宽度，请在两个上使用

col-6

类。谢谢。宽度不一样，宽度可以。我想要一样高的。尝试在您的集装箱上应用

align items:stretch

作为一种样式我尝试将align items:stretch放入多个div中，包括第一个内部div，但不起作用。也许你之前关于宽度的建议有助于确定高度，因为在我看来，第一个div比第二个div宽，因此存在宽度问题，但不幸的是，我无法按照你关于row或col-6的建议执行，因为我不知道应该在哪个容器中执行此操作，以及如何使用row类，你能用一个例子更新你的问题吗？或者如果可能的话，我应该更新哪个div？再次感谢你的帮助。他们现在紧挨着对方，但高度不同，场地有点错失了。你能建议如何正确放置它们吗？谢谢请在我的问题中查看他们现在的样子。我更新了它。这可能是因为你的宽度有点太小了，无法将它们按全尺寸对齐：我不知道，你正在使用引导。尝试在容器上使用

行

类，而不是使用两个css属性。如果您希望它们具有相同的宽度，请在两个上使用

col-6

类。谢谢。宽度不一样，宽度可以。我想要一样高的。尝试在您的集装箱上应用

align items:stretch

作为一种样式我尝试将align items:stretch放入多个div中，包括第一个内部div，但不起作用。也许你之前关于宽度的建议有助于确定高度，因为在我看来，第一个div比第二个div宽，因此存在宽度问题，但不幸的是，我无法按照你关于row或col-6的建议执行，因为我不知道应该在哪个容器中执行此操作，以及如何使用row类，你能用一个例子更新你的问题吗？或者如果可能的话，我应该更新哪个div？再次感谢