كيف يمكنني وضع على SPAN إلى الانحياز إلى أي من الجانبين وفوق الطاولة؟

Question

<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

و(حيث هو فترة الأيسر، وب هو العمر المناسب)

وP.S. يمكنك تغيير أي شيء يمنع الداخلي أتش تي أم أل الجدول.

Answer 1

<اقتباس فقرة>   

لا مكان لهم نسبيا، ولا   يفعل الجواب روب ألن، وضعوا لهم   في أقاصي متصفح لا،   ضمن عرض الجدول.

وحسنا أنها ستكون ملزمة عرض حاوية والجواب روب يجعل كلا الطاولة وعاء عرض 100٪.

والحل الوحيد الذي يمكنني أن أفكر من ناحية قبالة هو وضع في صف واحد في الجدول الخاص بك مع عمود واحد (التي تغطي كافة الأعمدة) وفي هذا الصف ديك عناصر div بك طرحت.

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

وأنا واجهت مشكلة مماثلة، ولقد وجدت الحل. انها لا تعتمد على عرض الجدول ولكن من اصعب قليلا. وهو يعمل في كل متصفح بما في ذلك IE5.5، IE6 والأحدث.

  <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 ستكون طويلة مثل المحتوى الداخلي. وهكذا وضع فقرة في أن يسبب لتمتد إلى حجم أكبر من طاولتنا.

Answer 4

وإذا كان لديك عناصر div بدلا من فترة، في محاولة تعويم: غادر لفترة ووتعويم: الحق لفترة ب

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>

لا مكان لهم نسبيا، ولا إجابة روب ألن، وضعوا لهم في أقاصي متصفح لا، وذلك في عرض الجدول.

Answer 6

وأنا لا أستطيع التفكير في أي حال، باستثناء لتعيين عرض الجدول إلى شيء. في حالتي أنا اخترت 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>

Answer 7

وMattMitchell، قد يكون لديك شيء هناك. وبعد ذلك فقط استخدام تعويم: غادر وتطفو الحق وأفترض