w3schools - كلمات html




عرض Div 100٪ مطروحًا منه كمية ثابتة من وحدات البكسل (7)

كيف يمكنني تحقيق البنية التالية بدون استخدام الجداول أو JavaScript؟ تمثل الحدود البيضاء حواف divs وليست ذات صلة بالسؤال.

يختلف حجم المنطقة في الوسط ، ولكن سيكون لها قيم البكسل بدقة ويجب أن يتم قياس البنية بأكملها وفقًا لهذه القيم. لتبسيط الأمر ، سأحتاج إلى طريقة لتعيين عرض "100٪ - nxx" لأقسام div-middle و net-middle.

أنا أقدر حل متصفح شامل نظيف ، ولكن في حالة عدم إمكانية ذلك ، سيقوم مخترقو CSS بعمل ذلك.

وهنا مكافأة. هيكل آخر أواجهه وأستخدمه في النهاية باستخدام الجداول أو جافا سكريبت. الأمر مختلف قليلاً ، لكنه يقدم مشاكل جديدة. لقد كنت أستخدمها بشكل أساسي في نظام jQuery-based windowing ، لكني أرغب في إبقاء المخطط خارج البرنامج النصي والتحكم فقط في حجم عنصر واحد (الوسط).


الطريقة المعتادة للقيام بذلك هي كما أوجزتها Guffa ، العناصر المتداخلة. إنه لأمر محزن بعض الشيء أن تضيف علامات إضافية للحصول على الخطافات التي تحتاجها لهذا ، ولكن من الناحية العملية فإن div div هنا أو هناك لن يؤذي أحدا.

إذا كان لا بد من القيام بذلك دون عناصر إضافية (على سبيل المثال ، عندما لا يكون لديك السيطرة على ترميز الصفحة) ، يمكنك استخدام box-sizing ، الذي يحتوي على دعم لائق أو غير مكتمل أو بسيط للمتصفح. على الأرجح أكثر متعة من الاضطرار إلى الاعتماد على البرامج النصية على الرغم من.


ربما أكون غبية ، لكن ليس الطاولة الحل الواضح هنا؟

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

طريقة أخرى قد برزت في الكروم هي أبسط من ذلك ، ولكن الرجل هو الاختراق!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

هذا وحده يجب أن يملأ ما تبقى من الخط أفقيًا ، كما تفعل خلايا الجدول. ومع ذلك ، يمكنك الحصول على بعض المشاكل الغريبة مع أكثر من 100 ٪ من أصلها ، وتحديد العرض إلى قيمة النسبة المئوية على الرغم من ذلك.


في بعض السياقات ، يمكنك الاستفادة من إعدادات الهوامش لتحديد "عرض 100٪ من النيكل بكسل" بشكل فعال. انظر الإجابة المقبولة على هذا السؤال .


في حين تعمل إجابة Guffa في العديد من المواقف ، فقد لا ترغب في بعض الحالات في أن يكون الجزء الأيسر و / أو اليمين من الحشو هما الوالدين لمركز div. في هذه الحالات ، يمكنك استخدام سياق تنسيق كتلة على المركز وتعويم divding اليمين اليسار واليمين. ها هي الكود

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS:

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

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

لاحظ أن هذا لا يعمل إلا على الأقسام والعناصر الأخرى التي تشترك في "ملء 100٪ من العرض بشكل افتراضي". سوف تتطلب منك المدخلات ، والجداول ، وربما البعض الآخر لفها في حاوية حاوية وإضافة المزيد من المغلق لاستعادة هذه الجودة. إذا كنت غير محظوظ بما فيه الكفاية ليكون في هذا الموقف ، اتصل بي وسوف نبسط المغلق.

jsfiddle هنا: jsfiddle.net/RgdeQ

استمتع!


ماذا لو كان div wrapping الخاص بك 100٪ واستخدمت الحشو لمقدار البكسل ، ثم إذا كان رقم الحشو # يحتاج إلى أن يكون ديناميكيًا ، فيمكنك بسهولة استخدام jQuery لتعديل مقدار المساحة عند إطلاق الأحداث.


يمكنك الاستفادة من تخطيط Flexbox . تحتاج إلى ضبط flex: 1 على العنصر الذي يحتاج إلى عرض ديناميكي أو ارتفاع flex-direction: row and column على التوالي.

العرض الديناميكي:

HTML

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

انتاج:

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}
<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

الارتفاع الديناميكي:

HTML

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

انتاج:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>


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

في ما يلي مثال يمكنك استخدامه لوضع الصور على هيئة زوايا دائرية جهة اليمين واليسار ، وصورة مركزية تتكرر بينهما.

HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}




width