css - شرح - tag w3schools




كيفية جعل عنصر كتلة مضمنة ملء ما تبقى من الخط؟ (4)

إذا كنت لا تستطيع استخدام overflow: hidden (لأنك لا تريد overflow: hidden ) أو إذا لم يعجبك مخترقي الحلقات / الحلقات CSS ، فيمكنك استخدام جافا سكريبت بدلاً من ذلك. لاحظ أنه قد لا يعمل جيدًا لأنه جافا سكريبت.

var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
  right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}
.lineContainer {
  width: 100% border: 1px solid #000;
  font-size: 0px;
  /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}

.lineContainer div {
  height: 10px;
  display: inline-block;
}

.left {
  width: 100px;
  background: red
}

.right {
  background: blue
}
<div class="lineContainer">
  <div class="left"></div>
  <div class="right"></div>
</div>

http://jsfiddle.net/ys2eogxm/

هل هذا أمر ممكن باستخدام CSS ووسمتين (أو أيا كان) DIV بدلاً من استخدام جدول؟

إصدار الجدول هو هذا (تمت إضافة الحدود حتى يمكنك رؤيته):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>

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

- BEGIN RANT--
لقد شاهدت تطبيقات "الإصلاح الواضح" و "الكأس المقدسة" للتنسيقات متعددة الأعمدة ذات العمود الجانبي ذي العرض الثابت ، وهي تمتص وهي معقدة. فهي تعكس ترتيب العناصر ، أو تستخدم عرض النسبة المئوية ، أو تستخدم العوامات ، والهوامش السلبية ، والعلاقة بين سمات "اليسار" ، "اليمين" ، و "الهامش" معقدة. علاوةً على ذلك ، تكون التخطيطات حساسة للبيكسل الفرعي بحيث يؤدي إضافة بكسل واحد من الحدود أو الحشو أو الهوامش إلى كسر التخطيط بالكامل وإرسال الأعمدة بأكملها إلى السطر التالي. على سبيل المثال ، تمثل أخطاء التقريب مشكلة حتى إذا حاولت القيام بشيء بسيط ، مثل وضع 4 عناصر على سطر ، مع ضبط عرض كل منها على 25٪.
--END RANT--

لقد حاولت استخدام "inline-block" و "white-space: nowrap؛" ، ولكن المشكلة هي أنني لا أستطيع الحصول على العنصر الثاني لملء المساحة المتبقية على الخط. تعيين العرض إلى شيء مثل "العرض: 100٪ - (LeftColumWidth) px" سيعمل في بعض الحالات ، ولكن إجراء عملية حسابية في خاصية عرض غير مدعوم حقًا.


حل حديث باستخدام flexbox:

.container {
    display: flex;
}
.container > div {
    border: 1px solid black;
    height: 10px;
}

.left {
   width: 100px;
}

.right {
    width: 100%;
    background-color:#ddd;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

http://jsfiddle.net/m5Xz2/100/


متوافق مع أجهزة تقييم حديثة حديثة (IE 8+): http://jsfiddle.net/m5Xz2/3/

.lineContainer {
    display:table;
    border-collapse:collapse;
    width:100%;
}
.lineContainer div {
    display:table-cell;
    border:1px solid black;
    height:10px;
}
.left {
    width:100px;
}
 <div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>


انظر: http://jsfiddle.net/qx32C/36/

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 20px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.right {
    overflow: hidden;
    background: #ccc
}
<div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

لماذا تم استبدال margin-left: 100px مع overflow: hidden على.

تحرير: هنا نوعان من المرايا للارتباط (ميت) أعلاه:







fixed-width