형식 HTML 표 요소

Question

이것은 실제로 사소한 것처럼 보이지만 의도 한 바를 달성 할 수 없습니다. 도구 상자 (부서 내의 테이블)에 새 요소를 추가하려고합니다. 그러나 새로 추가 된 요소는 정렬이 맞지 않습니다.

Pass-through과 Window query은 아래와 같이 중복됩니다.

HTML 표 다른 요소, 간단한 쿼리 창 쿼리에 대한 통과

클래스에 대한

<div style="float: left;" class="toolbox" id="toolbox"> 
    <table> 
    ... 
    <tr> 
     <td> 
      <label class="col-md-4 control-label">Simple Query</label> 
     </td> 
     <td> 
      <div class="squery" id="rId"></div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label class="col-md-4 control-label">Pass-through</label> 
     </td> 
     <td> 
      <div class="nElem" id="lId"></div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label class="col-md-4 control-label">Window Query</label> 
     </td> 
     <td> 
      <div class="wquery" id="wId"></div> 
     </td> 
    </tr> 
    ... 

CSS 클래스 nElem은 모두 동일합니다 패스 스루 클래스. 유일한 차이점은 색상입니다. (테이블이 생성되는 내 부문)

.nElem { 
    border: 1px solid #346789; 
    box-shadow: 2px 2px 19px #aaa; 
    -o-box-shadow: 2px 2px 19px #aaa; 
    -webkit-box-shadow: 2px 2px 19px #aaa; 
    -moz-box-shadow: 2px 2px 19px #aaa; 
    -moz-border-radius: 0.5em; 
    border-radius: 0.5em; 
    opacity: 0.8; 
    width: 120px; 
    height: 72px; 
    line-height: 80px; 
    cursor: pointer; 
    text-align: center; 
    z-index: 20; 
    position: absolute; 
    background-color: darkslateblue; 
    color: black; 
    font-family: helvetica, sans-serif; 
    padding: 0.5em; 
    font-size: 0.9em; 
    -webkit-transition: -webkit-box-shadow 0.15s ease-in; 
    -moz-transition: -moz-box-shadow 0.15s ease-in; 
    -o-transition: -o-box-shadow 0.15s ease-in; 
    transition: box-shadow 0.15s ease-in; 
} 

도구 상자 클래스

.toolbox { 
    margin: 0 auto; 
    margin-left: 10px; 
    width: 230px; 
    height:850px; 
    padding: 20px; 
    font-family: "Helvetica"; 
    font-size: small; 
    background: #f4f4f4; 
    border-radius: 3px; 
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3); 
} 

Answer 1

귀하의 코드가 정확히 무엇이 잘못 이해하는 것만으로는 충분하지 않습니다. 하지만 주된 문제는 .nElem, .squery, .wquery 등의 이유로 position: absolute;이 원인이라고 확신합니다. 따라서이 속성을 제거하고 다시보십시오. 여기 당신의 문제를 해결하기 위해 노력 : http://codepen.io/g1un/pen/ozZNkL

.nElem { 
    /*position: absolute;*/ 
}