html - شرح - خصائص الوسم div




كيفية جعل div لا أكبر من محتوياته؟ (20)

لدي تخطيط مشابه لـ:

<div>
    <table>
    </table>
</div>

أرغب في أن div فقط إلى نطاق واسع كما أصبح table بي.


أعتقد باستخدام

display: inline-block;

ستعمل ، ولكن لست متأكدا من توافق المتصفح.

قد يكون هناك حل آخر يتمثل في التفاف div في div آخر (إذا كنت تريد المحافظة على سلوك المنع):

HTML:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}

أود فقط تعيين padding: -whateverYouWantpx;


الإجابة عن سؤالك تكمن في المستقبل يا صديقي ...

أي "الجوهرية" تأتي مع أحدث تحديث CSS3

width: intrinsic;

للأسف IE خلفه لذلك لا يدعم ذلك حتى الآن

المزيد حول هذا الموضوع: وحدة نمطية لتغيير الحجم في CSS الأساسية والخارجية هل يمكنني استخدامها؟ : التحجيم الجوهرية والخارجية .

الآن يجب أن تكون راضيًا عن <span> أو <div>

display: inline-block;

الحل المتوافق مع CSS2 هو استخدام:

.my-div
{
    min-width: 100px;
}

يمكنك أيضًا تعويم div الخاص بك والذي سيجبره على أن يكون صغيرًا قدر الإمكان ، ولكنك ستحتاج إلى استخدام clearfix إذا كان أي شيء داخل div لديك يتحرك:

.my-div
{
    float: left;
}

العبث مع Firebug لقد وجدت قيمة الخاصية -moz-fit-content التي تعمل تمامًا على ما يريده البروتوكول الاختياري ويمكن استخدامه على النحو التالي:

width: -moz-fit-content;

على الرغم من أنه لا يعمل إلا على متصفح Firefox ، إلا أنني لم أتمكن من العثور على أي مكافئ للمتصفحات الأخرى مثل Chrome.


ببساطة

<div style="display: inline;">
    <table>
    </table>
</div>

حاول display: inline-block; . حتى يكون متوافقًا مع المتصفح ، يرجى استخدام رمز css أدناه.

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}
<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>


حاولت div.classname{display:table-cell;} وعملت!


شخصيا ، أنا ببساطة أفعل هذا:

كود HTML:

<div>
    <table>
    </table>
</div>

رمز CSS:

div {
    display: inline;
}

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


عرض تجريبي يعمل هنا

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}
<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>


لقد قمت بحل مشكلة مماثلة (حيث لم أكن أرغب في استخدام display: inline-block لأن العنصر كان مركزًا) بإضافة علامة span داخل علامة div ، وتحريك تنسيق CSS من علامة div الخارجية إلى الداخلي الجديد span . مجرد رمي هذا هناك فكرة بديلة أخرى إذا display: inline block ليست إجابة مناسبة لك.


ما يناسبني هو:

display: table;

في div . (تم اختباره على Firefox و Google Chrome ).


هناك نوعان من الحلول الأفضل

  1. display: inline-block;

    أو

  2. display: table;

من هذين display:table; أفضل.

display:inline-block; يمكنك استخدام طريقة الهامش السالب لإصلاح المساحة الإضافية


يمكنك استخدام الشريحة inline-block كـ user473598 ، لكن احذر من المتصفحات القديمة.

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

لا تدعم Mozilla المدخل المضمّن مطلقًا ، لكنّها تحتوي على -moz-inline-stack وهو -moz-inline-stack

بعض المتصفحات المتداخلة حول سمة العرض inline-block : https://css-tricks.com/snippets/css/cross-browser-inline-block/

يمكنك رؤية بعض الاختبارات باستخدام هذه السمة في: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/



يمكننا استخدام أي من الطريقتين في عنصر div :

display: table;

أو،

display: inline-block; 

أفضل استخدام display: table; ، لأنه يعالج ، كل المسافات الإضافية من تلقاء نفسها. أثناء display: inline-block يحتاج display: inline-block إلى بعض المساحة الإضافية.


حسنًا ، في كثير من الحالات ، لا تحتاج إلى إجراء أي شيء ، نظرًا لأن div الافتراضي يحتوي على height width تلقائي ، ولكن إذا لم يكن الأمر كذلك ، inline-block display inline-block عرض الشرائح inline-block معك ... انظر إلى الكود الذي أقوم بإنشائه بالنسبة لك وهو يفعل ما تبحث عنه:

div {
  display: inline-block;
}
<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>



<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>

    <div id="content_lalala">
        this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
    </div>

</td>
</tr>
</table>

أعلم أن الأشخاص لا يحبون الجداول في بعض الأحيان ، ولكن يجب أن أخبركم ، لقد حاولت استخدام الاختصارات المضمنة في css ، وقد عملوا في بعض الأقسام ، لكن في الآخرين لم يكن كذلك ، لذلك ، كان من الأسهل حقا أن أرفق div في جدول ... و ... يمكن أن يكون لديه خاصية مضمنة ولا يزال هو الجدول الذي سيعمل على عرض العرض الكلي للمحتوى. =)


div{
  width:auto;
  height:auto;
}




width