私は2つのdivを1つのdivに持っていきたいです

私のページは3つに分割されており、私はレイアウトにフレックスボックスモデルを使っています。最初の部分はトップパネルです.jspは私のウェブサイトのすべてのページに明示的に含まれています。 2番目の部分は左のボディ、3番目は右のボディです。これはdivのコンセプトを使って分割されていますが、今は左のボディのdivと右のボディのdivを1つのdivに持っていきたいのですが、。私は2つのdivを1つのdivに持っていきたいです

コードは次のとおりです。

<%@ include file="top-panel.jsp" %> 
    <div class="left_body"> 
    <!-- Heading Pannel Starts Here --> 
    <div class="welcome"> 
     <p id="heading-pannel">Welcome ${username}</p> 
     <hr id="hr-thick"> 
    </div> 
    ${shortcut} 
    <div class="form_area"> 
     <p> ${status} </p> 
     <div> 
     <c:if test="${emptyNotificationMessage!= null}"> 
     </c:if> 
     <c:if test="${notifications!= null}"> 
      <h3>Tasks pending</h3> 
      <hr id="hr-thin" /> 
      <div> 
      <c:forEach items="${notifications}" var="next"> 
       <form method="post" action="viewForm.htm"> 
       <img src="images/addon/u175.png" alt="pointer" class="pointer" /> 
       <input type="hidden" name="refNum" value="${next.key}"> ${next.value} 
       <input type="submit" value="View Form"> 
       </form> 
       <br> 
      </c:forEach> 
      </div> 
     </c:if> 

     <c:if test="${appHistory!= null}"> 
      <br/> 
      <br/> 
      <br/> 
      <br/> 
      <br/> 
      <h3>Application under review</h3> 
      <hr id="hr-thin" /> 
      <div> 
      <c:forEach items="${appHistory}" var="next"> 
       <img src="images/addon/u175.png" alt="pointer" class="pointer" /> ${next.value} 
       <br> 
      </c:forEach> 
      </div> 
     </c:if> 

     ${myProjectsHeader} 
     <div id="myProjects"> 
      <c:forEach items="${myProjects}" var="next"> 
      <form method="post" action="viewIndividualProject.htm"> 
       <input type="submit" value="${next.key}" class="transparent_btn"> 
       <input type="hidden" name="individualProjectLink" value="${next.value}"> 
       <input type="hidden" name="individualProjectName" value="${next.key}"> 
      </form> 
      <br> 
      </c:forEach> 
     </div> 


     </div> 
    </div> 
    </div> 
    <div class="right_body"> 
    <div class="right-box"> 
     <h3 class="h3-sty2">Do you Know</h3> 
     <p> 
     <h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p> 
     <p> 
     <h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
     <p> 
     <h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
     <hr id="hr-right-panel"> 
     <p> 
     <h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p> 
     <div> For any query e-mail to [email protected] &nbsp; &nbsp; &nbsp; &nbsp; </div> 
    </div> 
    </div>

私は、単一のdivで左半身と右のボディの全体のコードを追加すると、レイアウトが完全に消えます。 someonecanが私にそれを解決するのを助けるならば。それは素晴らしいことだ。

左半身と右のボディのCSSは次のとおりです。

.left_body { 
    position: relative; 
    width: 69%; 
    margin-top: 1px; 
} 
.right_body { 
    position: relative; 
    /* display:block; */ 
    width: 29%; 
    /* margin-top: 48px; 
    border:thin solid #BDBDBD; 
    border-radius:5px; */ 
} 
.right-box { 
    margin-top: 48px; 
    border: thin solid #BDBDBD; 
    border-radius: 5px; 
}

出典

2016-04-19 Harsha Heda

あなたはフロートとclearfixクラスを使用する必要があります。デモをご覧ください。

.left_body { 
 
    position: relative; 
 
    width: 69%; 
 
    margin-top: 1px; 
 
    float: left; 
 
} 
 
.right_body { 
 
    position: relative; 
 
    display: block; 
 
    width: 29%; 
 
    float: left; 
 
} 
 

 
.clearfix:after{ 
 
    content: " "; 
 
    display: table; 
 
} 
 
.clearfix:before{ 
 
    content: " "; 
 
    display: table; 
 
} 
 
.clearfix{ 
 
    clear: both; 
 
}

<div class="main clearfix"> 
 
    <div class="left_body"> 
 
       <!-- Heading Pannel Starts Here --> 
 
       <div class="welcome"> 
 
        <p id="heading-pannel">Welcome ${username}</p> 
 
        <hr id="hr-thick"> 
 
       </div> 
 
       ${shortcut} 
 
       <div class="form_area"> 
 
        <p> ${status} </p> 
 
        <div> 
 
         <c:if test="${emptyNotificationMessage!= null}"> 
 
         </c:if> 
 
         <c:if test="${notifications!= null}"> 
 
          <h3>Tasks pending</h3> 
 
          <hr id="hr-thin"/> 
 
          <div> 
 
           <c:forEach items="${notifications}" var="next"> 
 
            <form method="post" action="viewForm.htm"> 
 
             <img src="images/addon/u175.png" alt="pointer" class="pointer"/> 
 
             <input type="hidden" name="refNum" value="${next.key}"> 
 
             ${next.value} 
 
             <input type="submit" value="View Form"> 
 
            </form> 
 
            <br> 
 
           </c:forEach> 
 
          </div> 
 
         </c:if> 
 

 
         <c:if test="${appHistory!= null}"> 
 
          <br/><br/><br/><br/><br/> 
 
          <h3>Application under review</h3> 
 
          <hr id="hr-thin"/> 
 
          <div> 
 
           <c:forEach items="${appHistory}" var="next"> 
 
            <img src="images/addon/u175.png" alt="pointer" class="pointer"/> 
 
            ${next.value} 
 
            <br> 
 
           </c:forEach> 
 
          </div> 
 
         </c:if> 
 

 
         ${myProjectsHeader} 
 
         <div id="myProjects"> 
 
          <c:forEach items="${myProjects}" var="next"> 
 
            <form method="post" action="viewIndividualProject.htm"> 
 
             <input type="submit" value="${next.key}" class="transparent_btn"> 
 
             <input type="hidden" name="individualProjectLink" value="${next.value}"> 
 
             <input type="hidden" name="individualProjectName" value="${next.key}"> 
 
            </form> 
 
            <br> 
 
          </c:forEach> 
 
         </div> 
 

 

 
        </div> 
 
       </div> 
 
      </div> 
 
    <div class="right_body"> 
 
       <div class="right-box"> 
 
       <h3 class="h3-sty2">Do you Know</h3> 
 
       <p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p> 
 
       <p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
 
       <p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
 
       <hr id="hr-right-panel"> 
 
       <p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p> 
 
       <div> For any query e-mail to [email protected] &nbsp; &nbsp; &nbsp; &nbsp; </div> 
 
       </div> 
 
      </div> 
 
<div>

出典

2016-04-19 11:56:31

あなたのスタイルシートの代わりにこれを試してみてください。

.left_body{ 
    position:relative; 
    width:69%; 
    margin-top:1px; 
    margin-right: 0px; 
    margin-left: 0px; 
    float: left; 
    height: 100%; 
    } 
    .right_body{ 
    position:relative; 
    /* display:block; */ 
    width:29%; 
    /* margin-top: 48px; 
    border:thin solid #BDBDBD; 
    border-radius:5px; */ 
    margin-right: 0px; 
    margin-left: 0px; 
    float: left; 
    height: 100%; 
    } 
    .right-box{ 
    margin-top: 48px; 
    border:thin solid #BDBDBD; 
    border-radius:5px; 
    } 
    .main_body{ 
     width: 100%; 
     height: 100%; 
    }

とあなたのコードは次のようにする必要があります： - あなたは完全にちょうどそれらを削除し、これを試してみてくださいあなたのページからleft_bodyとright_bodyタグを削除したい場合は

<body> 
     <div class="main_body"> 
     <div class="left_body"> 
      <!-- Heading Pannel Starts Here --> 
      <div class="welcome"> 
       <p id="heading-pannel">Welcome ${username}</p> 
       <hr id="hr-thick"> 
      </div> 
      ${shortcut} 
      <div class="form_area"> 
       <p> ${status} </p> 
       <div> 
        <c:if test="${emptyNotificationMessage!= null}"> 
        </c:if> 
        <c:if test="${notifications!= null}"> 
         <h3>Tasks pending</h3> 
         <hr id="hr-thin"/> 
         <div> 
          <c:forEach items="${notifications}" var="next"> 
           <form method="post" action="viewForm.htm"> 
            <img src="images/addon/u175.png" alt="pointer" class="pointer"/> 
            <input type="hidden" name="refNum" value="${next.key}"> 
            ${next.value} 
            <input type="submit" value="View Form"> 
           </form> 
           <br> 
          </c:forEach> 
         </div> 
        </c:if> 

        <c:if test="${appHistory!= null}"> 
         <br/><br/><br/><br/><br/> 
         <h3>Application under review</h3> 
         <hr id="hr-thin"/> 
         <div> 
          <c:forEach items="${appHistory}" var="next"> 
           <img src="images/addon/u175.png" alt="pointer" class="pointer"/> 
           ${next.value} 
           <br> 
          </c:forEach> 
         </div> 
        </c:if> 

        ${myProjectsHeader} 
        <div id="myProjects"> 
         <c:forEach items="${myProjects}" var="next"> 
           <form method="post" action="viewIndividualProject.htm"> 
            <input type="submit" value="${next.key}" class="transparent_btn"> 
            <input type="hidden" name="individualProjectLink" value="${next.value}"> 
            <input type="hidden" name="individualProjectName" value="${next.key}"> 
           </form> 
           <br> 
         </c:forEach> 
        </div> 


       </div> 
      </div> 
     </div> 
     <div class="right_body"> 
      <div class="right-box"> 
      <h3 class="h3-sty2">Do you Know</h3> 
      <p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p> 
      <p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
      <p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p> 
      <hr id="hr-right-panel"> 
      <p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p> 
      <div> For any query e-mail to [email protected] &nbsp; &nbsp; &nbsp; &nbsp; </div> 
      </div> 
     </div> 
    </div> 
</body>

出典

2016-04-19 12:10:11

-1

： -

.right-box{ 
    margin-top: 48px; 
    border:thin solid #BDBDBD; 
    border-radius:5px; 
    width: 29%; 
    } 
    .form_area{ 
     width: 69%; 
    }

出典

2016-04-19 12:27:11

これは以前の回答を編集する必要があります。 –

私は2つのdivを1つのdivに持っていきたいです

答えて

関連する問題