如何将 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">

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