تجاوز المغلق شعبة وحجم الأفقي الديناميكي

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

  •  21-08-2019
  •  | 
  •  

سؤال

ولدي صفحة على شبكة الإنترنت أن يظهر الكثير من جداول البيانات ولكل من هذه الجداول تحتاج إلى وضعها على خط أفقي واحد. لقد سخر حتى في المثال التالي: 

<html>
<style>
  .outer{width:300px;height:300px;overflow: scroll;}
  .inner{white-space: nowrap;}
  .inline{float: left;}
</style>
<body>
<div class="outer">
    <div class="inner">
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
    </div>
</div>
</body>
</html>

وأواجه المشاكل التي شعبة الداخلي يلتف عناصر div الجدول إلا أنا وضعت لدينا عرض كبير مثل 4000px. هل هناك طريقة لطيفة لحفظ كافة الجداول المضمنة حتى لو كانت تتجاوز حجم شعبة الخارجي فقط مع المغلق؟

هل كانت مفيدة؟

المحلول

تغيير .inline{float: left;} إلى .inline{display:inline-block;}

http://jsfiddle.net/QLe5r/

نصائح أخرى

وبنا هذه الخاصية: 

white-space:nowrap;

وذلك لأن تعويم: غادر على عناصر div "المضمنة". يستخدم بدلا من ذلك العرض: مضمنة كتلة، (وعرض: مضمنة لشركة آي إي، وأعتقد أن تحقق).

وماذا عن EARTH هل لديك طن من الجداول داخل طن من عناصر div؟!؟ أن الهزائم الغرض من استخدام الجداول للبيانات جداول ... عندما تقومون به جداول البيانات يجب عليك فقط استخدام الجداول ... لا تنطبق مجموعات عديمة الفائدة.

وببساطة استخدام طاولة واحدة واستخدام <td>stuff</td> في كل مرة كان لديك المزيد من البيانات لإضافة ... تستند في الدفتيريا أفقي على أي حال حتى تتمكن لن يكون حتى لعناء مع المغلق لأنها قد تمتد.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top