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

Question

我是 CSS 初学者。在 JSP 页面中，我有两个位于彼此之下的 div。每个 div 都带有一个字段、按钮和一个表格。我需要将字段、表格和按钮放置在彼此旁边，而不是放在彼此下面。下面是我的 2 个 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>

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

Answer 1

创建一个容器 div，您的两个 div 都位于其中。这个 div 必须是display:flexand 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">&nbsp; &nbsp;<div class="innerDiv"></div>&nbsp; &nbsp;<div class="innerDiv"></div></div><style>.d-flex {&nbsp; &nbsp; display: -webkit-box;&nbsp; &nbsp; display: -ms-flexbox;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; -ms-flex-wrap: wrap;&nbsp; &nbsp; flex-wrap: wrap;&nbsp; &nbsp; margin-right: -15px;&nbsp; &nbsp; margin-left: -15px;}`.innerDiv {&nbsp; &nbsp;padding-left: 15px;&nbsp; &nbsp;padding-right:15px;}</style>