如何将 div 元素彼此相邻放置？

Question

我是 CSS 的初学者。在 JSP 页面中，我有两个位于彼此下方的 div。每个 div 都带有一个字段、按钮和一个表格。我需要将字段、表格和按钮放在彼此旁边，而不是在彼此下方。下面是我的 2 个 div 的 JSP。如何实现我想要的？

第一个 div：

            <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>

第二格

    <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>      

Answer 1

制作一个容器 div，您的两个 div 都位于其中。这个 div 必须是 display:flex 和 flex-direction:row:

<div style="display:flex; flex-direction:row">
<div id="firstdiv"></div>
<div id="seconddiv"></div>
</div>

另一种解决方案是将display:inline-block 添加到您的两个 div 中

Answer 2

<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>