كيف تجعل عناصر Div عرضًا مضمّنًا؟

https://stackoverflow.com/questions/224602

03-07-2019
|

سؤال

بالنظر إلى هذا HTML:

<div>foo</div><div>bar</div><div>baz</div>

كيف تجعلهم يعرضون خطًا مثل هذا:

Foo Bar Baz

ليس كذلك:

فو
شريط
باز

المحلول

هذا شيء آخر إذن:

div.inline { float:left; }
.clearBoth { clear:both; }

<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->

نصائح أخرى

Div المضمّن هو غريب من الويب ويجب التغلب عليه حتى يصبح فترة (على الأقل 9 مرات من أصل 10) ...

<span>foo</span>
<span>bar</span>
<span>baz</span>

... يجيب على السؤال الأصلي ...

حاول كتابتها مثل هذا:

div { border: 1px solid #CCC; }

    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>

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

اعتذار لداريل. قرأت class = "inline" كأناقة = "Display: Inline". لديك الإجابة الصحيحة ، حتى لو كنت تستخدم أسماء فصول مشكوك فيها بشكل دلالي ؛-)

استخدام ملكة جمال br لتوفير التصميم الهيكلي بدلاً من التخطيط النصي هو أمر سائد للغاية بالنسبة لي.

إذا كنت ترغب في وضع أكثر من العناصر المضمنة داخل هؤلاء divs ثم يجب أن تطفو هؤلاء divS بدلا من جعلها مضمنة.

divs العائمة:

===== ======= ==   **** ***** ******   +++++ ++++
===== ==== =====   ******** ***** **   ++ +++++++
=== ======== ===   ******* **** ****   
===== ==== =====                       +++++++ ++
====== == ======

divs المضمنة:

====== ==== ===== ===== == ==== *** ******* ***** ***** 
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++

إذا كنت بعد السابق ، فهذا هو الحل الخاص بك وتفقد ذلك br العلامات:

<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>

لاحظ أن عرض هذه divs سائل ، لذلك لا تتردد في وضع العروض عليها إذا كنت تريد التحكم في السلوك.

شكرا ، ستيف

يستخدم display:inline-block بهامش واستعلام إعلامي لـ IE6/7:

<html>
  <head>
    <style>
      div { display:inline-block; }
      /* IE6-7 */
      @media,
          {
          div { display: inline; margin-right:10px; }
          }
   </style>
  </head>
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</html>

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

فيما يلي رمز HTML وفقًا لمتطلباتك:

<div class="main-div">
 <div>foo</div>
 <div>bar</div>
 <div>baz</div>`
</div>

لديك طريقتين للقيام بذلك

باستخدام بسيط display:inline-block;
أو باستخدام float:left;

لذلك عليك تغيير خاصية العرض display:inline-block; بقوة

مثال واحد

div {
    display: inline-block;
}

مثال الثاني

div {
    float: left;
}

تحتاج إلى إزالة التعويم

.main-div:after {
    content: "";
    clear: both;
    display: table;
}

كما ذكرنا ، العرض: على الأرجح ما تريده. بعض المتصفحات تدعم أيضا حاصرات مضمنة.

http://www.quirksmode.org/css/display.html#inlineblock

ما عليك سوى استخدام Wrapper Div مع "Float: Left" ووضع الصناديق في الداخل تحتوي أيضًا على تعويم: اليسار:

CSS:

wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}

.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}

لغة البرمجة:

<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>

مناسب لي :

<style type="text/css">
    div{
        position: relative;
        display: inline-block;
        width:25px;
        height:25px;
    }
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>

<span> ?

أود استخدام الامتدادات أو تعويم اليسار. المشكلة الوحيدة في الطفو هي أنه يتعين عليك مسح التعويم بعد ذلك أو يجب أن يكون لدى Div المحتوي على نمط الفائض إلى Auto

أعلم أن الناس يقولون إن هذه فكرة فظيعة ، ولكن يمكن أن تكون في الممارسة المفيدة مفيدة إذا كنت ترغب في القيام بشيء مثل صور البلاط مع تعليقات تحتها. على سبيل المثال ، يستخدمه Picasaweb لعرض الصور المصغرة في ألبوم.
انظر على سبيل المثال/العرض التوضيحي http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (فئة goog-inline-block ؛ أنا اختصرها على IB هنا)

/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }

بالنظر إلى أن CSS ، قم بتعيين Div إلى Class IB ، والآن أصبح عنصر كتلة مضمّن بطريقة سحرية.

تحتاج إلى احتواء ثلاثة divs. هنا مثال:

CSS

div.contain
{
  margin:3%;
  border: none;
  height: auto;
  width: auto;
  float: left;
}

div.contain div
{
  display:inline;
  width:200px;
  height:300px;
  padding: 15px;
  margin: auto;
  border:1px solid red;
  background-color:#fffff7;
  -moz-border-radius:25px; /* Firefox */
  border-radius:25px;
}

ملحوظة: سمات حدود الحدود اختيارية والعمل فقط في المتصفحات المتوافقة مع CSS3.

لغة البرمجة

<div class="contain">
  <div>Foo</div>
</div>

<div class="contain">
  <div>Bar</div>
</div>

<div class="contain">
  <div>Baz</div>
</div>

لاحظ أن Divs 'Foo' 'Bar "و" Baz "يتم احتجازهما داخل" احتواء "div.

<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>

أعتقد أنه يمكنك استخدام هذه الطريقة دون استخدام أي CSS -

<table>
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
    <tr>
        <td>baz</td>
    </tr>
</table>

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

<span>foo</span><span>bar</span><span>baz</span>

يمكننا أن نفعل هذا مثل

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>

<div class="cdiv">
<div class="inline"><p>para 1</p></div>
 <div class="inline">
     <p>para 1</p>
     <span>para 2</span>
     <h1>para 3</h1>
</div>
 <div class="inline"><p>para 1</p></div>

http://jsfiddle.net/f8l0y5wx/

<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
    #div01, #div02, #div03 {
                                float:left;
                                width:2%;
    }   
 </style>
 <div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 //solution 2

 <style>
      #div01, #div02, #div03 {
                                  display:inline;
                                  padding-left:5px;
      }   
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 /* I think this would help but if you have any other thoughts just let me knw      kk */

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow