스팬을 테이블 양쪽과 위에 정렬 할 수있는 방법을 어떻게 배치 할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/228102

  •  03-07-2019
  •  | 
  •  

문제 

<div>
<span>left</span>
<span>right</span>
<!-- new line break, so no more content on that line -->
<table> 
...
</table>
</div>

테이블이 얼마나 큰지에 따라 (어디서나 정의되지 않았으며 없어야 함)에 따라 스팬이 테이블의 왼쪽 상단에 배치되도록하는 방법 (모든 요소로 변경할 수 있음)을 어떻게 배치 할 수 있습니까? 테이블의 오른쪽.

예시:

a    b
table0
table1
table2

(여기서 A는 왼쪽 범위이고 B는 오른쪽 범위입니다)

추신 : 바 내부 테이블 html을 변경할 수 있습니다.

도움이 되었습니까?

해결책

Rob Allen의 답변도 상대적으로 배치하지 않으며 테이블 너비 내에서 브라우저의 먼 곳에 놓았습니다.

글쎄, 그들은 컨테이너 너비에 묶여 있고 Rob의 답변은 테이블과 컨테이너 너비를 100%로 만듭니다.

내가 오프 핸드를 생각할 수있는 유일한 해결책은 단일 열 (모든 열에 걸친)으로 테이블에 줄을 넣는 것입니다. 그 행에는 부유 한 div가 있습니다.

다른 팁

<style type="text/css">
    #wrapper, #top, #tableArea
     {
       width: 100%;
       padding: 10px;
       margin: 0px auto;
      }

     #top
      {
        padding: 0px;
      }

      #leftBox, #rightBox
      {
          margin: 0px;
          float: left;
          display: inline;
          clear: none;
       }

       #rightBox
        {
            float: right;
        }
     </style>
<div id="wrapper">
    <div id="top">
        <div id="leftBox">A</div>
        <div id="rightBox">b<</div>
    </div>
    <div id="tableArea">
        <table> ... </table>
    </div>
</div>

나는 비슷한 문제를 겪었고 해결책을 찾았습니다. 테이블의 너비에 의존하지 않지만 조금 까다 롭습니다. IE5.5, IE6 및 NEWER를 포함한 모든 브라우저에서 작동합니다.

  <style>
  .tablediv {
  float:left; /* this is a must otherwise the div will take a full width of our page and this way it wraps only our content (so only the table)   */
  position:relative; /* we are setting this to start the trickie part */  
  padding-top:2.7em; /* we have to set the room for our spans, 2.7em is enough for two rows otherwise try to use something else; for one row e.g. 1.7em */
  }
  .leftspan {
  position:absolute; /* seting this to our spans will start our behaviour */
  top:0; /* we are setting the position where it will be placed inside the .tablediv */
  left:0;
  }
  .rightspan {
  position:absolute; 
  top:0; 
  right:0; 
  }
  </style>
<div class="tablediv">
 <span class="leftspan">Left text</span>
 <span class="rightspan">Right text <br /> with row</span>
  <table border="1">
   <tr><td colspan="3">Header</td></tr>
   <tr><td rowspan="2">Left content</td><td>Content</td><td rowspan="2">Right content</td></tr>
   <tr><td>Bottom content</td></tr>
  </table>
</div>
 <!-- If you don't want to float this on the right side of the table than you must use the clear style -->
 <p style="clear:both">
  something that continues under our tablediv
 </p>

어떤 이유로 플로트를 사용할 수없는 경우, 내가 실수로 찾은 대체 .tablediv 스타일을 사용할 수 있습니다. 그냥 교체하십시오 float:left; to display:inline-block; 이것은 모든 최신 브라우저에서 작동하지만 IE7 이하는 아닙니다.

이제 당신은 내 요점을 얻고 다른 솔루션을 찾을 것이라고 확신합니다. .tablediv는 내부 컨텐츠만큼 길다는 것을 잊지 마십시오. 따라서 단락을 넣으면 테이블보다 더 큰 크기로 늘어납니다.

스팬 대신 divs가있는 경우, float : span a and float에 대한 왼쪽 : span b에 오른쪽으로 왼쪽

<div>
<div style="float:left">a</div><div style="float:right">b</div>
<br style="clear: both">
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
aaaaaaaaaaaaaaaaaaaaaaaaaaa<br />
</div>

Rob Allen의 답변도 상대적으로 배치하지 않으며 테이블 너비 내에서 브라우저의 먼 곳에 놓았습니다.

어쨌든 테이블의 너비를 무언가로 설정하는 것 외에는 생각할 수 없습니다. 제 경우에는 100%를 선택하여 50EM에서 랩퍼의 너비로 뻗어 있습니다.

<style type="text/css">
#wrapper {
    width: 1%;
    min-width:50em;
    padding: 10px;
}
#mainTable {
    width:100%;
}

#leftBox {
    float: left;
}

#rightBox {
    float: right;
}
</style>
<div id="wrapper">
    <div id="leftBox">A</div>
    <div id="rightBox">b</div>
    <br style="clear: both" />
    some text some text some text some text some text <br />
    some text some text some text some text some text <br />
    some text some text some text some text some text
    <table id="mainTable" border="1"><tr><td>test</td><td>test 2</td></tr></table>
</div>

@MattMitchell, 거기에 뭔가가있을 수 있습니다. 그리고 그냥 fload를 사용합니다 : 왼쪽과 float 오른쪽이라고 생각합니까?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top