[英]How to Place div elements next to each other?
我是 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"> </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"> </label>
<label class="btn-is">
<img class="docIcon" src="${pageContext.request.contextPath}/images/icons/buttons/add-request.png" /> <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"> </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"> </label>
<label class="btn-is">
<img class="docIcon" src="${pageContext.request.contextPath}/images/icons/buttons/add-request.png" /> <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>
制作一個容器 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
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.