css شرح كيفية الحصول على DIVs العائمة داخل DIV ثابت العرض للمتابعة أفقياً؟




margin css (8)

ضع divs التي تريد تمريرها في جدول مثل ذلك:

<div style='width:1000;border:2 solid red;overflow-x:auto'>
   <table><tr>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 1&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 2&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 3&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 4&nbsp;</div></td>
      <td><div style='width:300;height:200;border:1 solid black'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>

تحرير: جربت 3 من هذه الحلول المقترحة - تعمل جميعها بشكل جيد في Google Chrome - لكن الحل الأول (container1) لا يعمل في IE (اذهب إلى الشكل) - لذلك يحصل حل SPAN على تصويتي :-):

<html>
<body>
<style>
div#container1 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container1 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container2 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container2 span.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

div#container3 
   {
   height: 275px;
   width: 100%;
   overflow: auto;
   white-space: nowrap;
   border:2 solid red;
   }

div#container3 div.block 
   {
   width: 300px;
   height: 200px;
   display: inline-block;
   border: 1 solid black;
   }

</style>
<p>
<div id='container1'>
      <div class='block'>Cell 1&nbsp;</div>
      <div class='block'>Cell 2&nbsp;</div>
      <div class='block'>Cell 3&nbsp;</div>
      <div class='block'>Cell 4&nbsp;</div>
      <div class='block'>Cell 5&nbsp;</div>
</div>
<p>
<div id='container2'>
      <span class='block'>Cell 1&nbsp;</span>
      <span class='block'>Cell 2&nbsp;</span>
      <span class='block'>Cell 3&nbsp;</span>
      <span class='block'>Cell 4&nbsp;</span>
      <span class='block'>Cell 5&nbsp;</span>
</div>
<p>
<div id='container3'>
   <table><tr>
      <td><div class='block'>Cell 1&nbsp;</div></td>
      <td><div class='block'>Cell 2&nbsp;</div></td>
      <td><div class='block'>Cell 3&nbsp;</div></td>
      <td><div class='block'>Cell 4&nbsp;</div></td>
      <td><div class='block'>Cell 5&nbsp;</div></td>
   </tr></table>
</div>
</body>
</html>

تحرير 2:

قمت بتشغيل صفحة الاختبار هذه من خلال Browsershots.org ، لمعرفة كيفية تعامل المتصفحات المختلفة معها. الخلاصة: توافق المتصفح تمتص. :-)

http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm

نجح حل الطاولة في كثير من الأحيان - ولكن خيار المدى (وهو أنظف) لم ينقطع إلا عن المتصفحات التي لم أسمع عنها مطلقًا. :-)

لدي حاوية DIV مع ارتفاع ثابت وعرض (275x1000px). في هذا DIV ، أريد وضع DIVs عائمة متعددة بعرض 300 بكسل لكل منها ، ولديك شريط تمرير أفقي (محور س) يظهر للسماح للمستخدم بالتمرير لليسار ولليمين لعرض كل شيء.

هذا هو بلدي المغلق حتى الآن:

div#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}

div#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

المشكلة هي أن DIVs العائمة لن يستمر بعد عرض الحاوية. بعد وضع ثلاثة من DIV العائمة أنها سوف تستمر في تحتها. إذا قمت بتغيير overflow-y إلى تلقائي ، فسيظهر شريط التمرير العمودي ويمكنني التمرير لأسفل.

كيف يمكنني تغيير هذا لجعل DIVs العائمة تستمر دون الذهاب تحت بعضها البعض؟


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

إذا كنت لا ترغب في استخدام الجداول ، فيمكنك أيضًا وضع جميع div. div في div آخر داخل #contain ومنح ذلك "بين - div" عرضًا ثابتًا محسوبًا باستخدام جافا سكريبت بعد تحميل الصفحة.

بالطبع إذا كنت تعرف بالفعل عدد كتل. / إذا كان الرقم ثابتًا ، فيمكنك إعطاء "بين الفواصل" عرضًا ثابتًا باستخدام css.


div#container {
    height: 275px;
    width: 1000px;
    overflow: auto;
    white-space: nowrap;
}

div#container span.block {
    width: 300px;
    display: inline-block;
}

الخدعة هنا هي أن العناصر التي تتصرف بشكل مضمّن افتراضيًا فقط هي التي ستتصرف بشكل صحيح عند التعيين على كتلة مضمّنة في Internet Explorer ، لذلك يجب أن تكون الحاويات الداخلية <span> بدلاً من <div>.


#row {
    white-space: nowrap; /* important */
    overflow: auto;
}

.items {
    display: inline-block;
}
<div id="row">
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 1" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 2" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 3" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 4" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 5" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 6" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 7" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 8" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 9" />
    </div>
    <div class="items">
        <img src="//placehold.it/200/100" alt="item 10" />
    </div>
</div>

الخدعة هنا هي خاصية "المسافة البيضاء: nowrap" الخاصة بالوالد والتي تخبر كل العناصر التابعة لها بالاستمرار أفقياً وخاصية "العرض: كتلة مضمّنة" لأطفالها. لا تحتاج إلى إضافة أي خاصية أخرى لجعل هذا العمل.

JS Fiddle: http://jsfiddle.net/2c4jfetf/


أنت بحاجة إلى div إضافي بعرض كبير لاحتواء الكتل ، ثم ستمتد على نطاق أوسع من div الحاويات وليس المنسدلة إلى سطر جديد.

HTML:

<div id="container">
    <div id="width">
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <div class="block">
            <!-- contents of block -->
        </div>
        <!-- more blocks here -->
    </div>
</div>

CSS:

#container {
    height: 275px;
    width: 1000px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 275px;
}
#container #width {
    width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
    float: left;
    margin: 3px 90px 0 3px;
}

يبدو أنك تفعل معرض مع div؟

ما الذي تستخدمه بالضبط divs؟

قد يكون من الأسهل استخدام ul / li مع مسافات داخل li للحصول على نفس التأثير دون كل الصداع الناتجة عن div div.


استعمال:

    div#container {
        overflow: auto;
    }

أو أضف div المقاصة أسفل divs الثلاثة مع النمط:

    {
        clear: both
    }

حبيبي السابق:

عرض div: 850px عرض الشبكة templatedcumn ItemTemplate

<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>

end ItemTemplate end templatedcolumn end gridview end div

غادر الزر الأوسط (الزر الفعلي) يمتد حيث لا يتحرك حيث كان هناك div الخارجي مع عرض ثابت.

اضطررت إلى استخدام div إضافية بعرض 140px خارج الزر ، بداخل itemtemplate ، ثم عملت.

أتمنى أن يساعدك هذا!!!

شكرا لك هاريش





css-float