[html] قم بتوسيع div ليأخذ العرض المتبقي


Answers

لقد اكتشفت سحر المربعات المرنة (العرض: فليكس). جرب هذا:

<style>
  #box {
    display: flex;
    float: left;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

المربعات فليكس تعطيني التحكم كنت أتمنى css لمدة 15 عاما. انها هنا اخيرا! مزيد من المعلومات: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Question

أرغب في تخطيط div ثنائي الأعمدة ، حيث يمكن أن يكون لكل واحد عرض متغير مثل

div {
    float: left;
}
.second {
    background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

أريد أن يتم توسيع div "عرض" إلى العرض بالكامل بعد أن تملأ المساحة المخصصة لـ "الشجرة". في الوقت الحالي ، يتم تغيير حجم العرض الخاص بي إلى المحتوى الذي يحتوي عليه ، وسيكون من الجيد أيضًا أن يشغل كلا القسمين ارتفاعًا كاملًا

ليس إخلاءًا مكررًا:

قم بتوسيع div إلى أقصى عرض عند التعويم: تم تعيين اليسار لأن هناك واحدًا ثابتًا بعرض ثابت.

مساعدة في div - اجعل div مناسبًا للعرض المتبقي لأنني أحتاج إلى عمودين محاذلين إلى اليسار




تحقق من هذا الحل

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}
<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>




شكرا لقابس Simpl.css!

تذكر التفاف جميع الأعمدة الخاصة بك في ColumnWrapper مثل ذلك.

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

أنا على وشك إطلاق الإصدار 1.0 من Simpl.css لذا ساعد في نشر الكلمة!




لا أفهم سبب استعداد الأشخاص للعمل بجد لإيجاد حل CSS خالص للتصميمات العشرية البسيطة التي تكون سهلة جدًا باستخدام علامة TABLE القديمة.

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

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

أقل خطورة بكثير من حيث التوافق عبر المستعرض أيضًا.




استخدم calc :

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}
<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

تكمن المشكلة في ذلك في أن جميع العروض يجب أن يتم تعريفها بوضوح ، إما كقيمة (px و em تعمل بشكل جيد) ، أو كنسبة مئوية من شيء محدد بشكل واضح.




يمكنك استخدام مكتبة W3.CSS التي تحتوي على فئة ' rest ' مثل هذا:

<!DOCTYPE html>
 <html>
   <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   <body>
    <div class="w3-row">
      <div class="w3-col " style="width:150px"><p>150px</p></div>
      <div class="w3-rest w3-green"><p>w3-rest</p></div>
    </div>
   </body>
 </html>

لا تنسى ربط مكتبة css الخاصة بـ W3 في رأس صفحة html:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_rest&stacked=h




ألقِ نظرة على إطارات تخطيط CSS المتاحة. أوصي بـ Simpl أو ، إطار عمل مخطط أكثر تعقيدًا قليلاً.

إذا كنت تستخدم Simpl (الذي يتضمن استيراد ملف simpl.css واحد فقط) ، فيمكنك القيام بذلك:

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

، للحصول على تنسيق 50-50 ، أو:

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

، ل 25-75 واحد.

بكل بساطة.




بات - أنت على حق. هذا هو السبب في أن هذا الحل يرضي كلا "الديناصورات" والمعاصرين. :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
  <style type="text/css">
    .btnCont {
      display: table-layout;
      width: 500px;
    }
    .txtCont {
      display: table-cell;
      width: 70%;
      max-width: 80%;
      min-width: 20%;
    }
    .subCont {
      display: table-cell;
      width: 30%;
      max-width: 80%;
      min-width: 20%;
    }
    .txtCont .ip {
      width: 100%;
      max-width: 100%;
      min-width: 30%
    }
  </style>
</head>

<body>
  <div class="btnCont">
    <div class="txtCont">Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!</div>
    <div class="subCont">This column as well as the entire container works like a table. Isn't Amazing!!!</div>
  </div>
</body>

</html>




لست متأكدًا إذا كان هذا هو الجواب الذي تتوقعه ، ولكن لماذا لا تحدد عرض Tree إلى 'auto' وعرض 'View' إلى 100٪؟




Links