Wie kann ich einen SPAN positionieren zu beiden Seiten und über einem Tisch ausgerichtet werden?

Question

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

Wie kann ich diese Spannweiten positionieren (sie können auf ein beliebiges Element geändert werden), so dass je nachdem, wie groß die Tabelle (nicht überall definiert, und sollte nicht) die Spannweiten nur oben auf der linken Seite angeordnet sind, der Tisch und die rechte Seite der Tabelle.

Beispiel:

a    b
table0
table1
table2

(wobei a die linke Spanne, und b ist die richtige Spanne)

P. S. Sie können alles bar innere Tabelle html ändern.

Answer 1

  

Hat legen Sie sie nicht relativ, noch   Rob Allen tut Antwort, sie setzen sie   in den Weiten des Browsers nicht,   innerhalb der Tabellenbreite.

Nun, sie gehen Antwort durch ihre Containerbreite und Robs gebunden zu sein, macht sowohl den Tisch und Behälterbreite 100%.

Die einzige Lösung, die ich aus der Hand denken kann, ist in einer Reihe in der Tabelle mit einer einzigen Spalte (Spanning alle Spalten) und in dieser Reihe haben Sie schwebte DIVs zu setzen.

Answer 2

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

Answer 3

Ich lief in ähnliches Problem, und ich habe eine Lösung gefunden. Es hängt nicht von der Breite der Tabelle, aber es ist ein wenig komplizierter. Es funktioniert in jedem Browser einschließlich IE5.5, IE6 und neuer.

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

Wenn Sie nicht einen Schwimmer aus irgendeinem Grunde verwenden können, als Sie einen alternativen .tablediv Stil verwenden können, die ich durch einen Fehler gefunden. Ersetzen Sie einfach die float:left; to display:inline-block; Diese in allen modernen Browser funktioniert aber nicht in IE7 und unten.

Jetzt haben Sie meine Nummer und ich bin sicher, dass Sie andere Lösungen finden. Vergessen Sie aber nicht, dass die .tablediv als inneren Gehalt so lange sein wird. So platzieren Sie einen Absatz in es wird dazu führen, dass eine größere Größe als unsere Tabelle zu strecken.

Answer 4

Wenn Sie divs statt Spannweite haben, versuchen float: left für Spannweite a und float: right für Spannweite b

Answer 5

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

Ist sie nicht relativ platzieren, noch hat Rob Allens Antwort, sie stellen sie in den Weiten des Browsers nicht, innerhalb der Tabellenbreite.

Answer 6

Ich kann nicht von ohnehin denken, es sei denn, die Breite der Tabelle auf etwas zu setzen. In meinem Fall wähle ich 100%, was bei 50em auf die Breite des Rappers erstreckt:

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

Answer 7

@MattMitchell, könnten Sie etwas dort haben. Und dann nur float: links und rechts schwimmt Ich gehe davon aus