كيفية محاذاة 3 divs (اليسار/الوسط/اليمين) داخل div آخر؟

StackOverflow https://stackoverflow.com/questions/2603700

سؤال

أريد أن يكون هناك 3 divs محاذاة داخل حاوية Div ، شيء من هذا القبيل:

[[LEFT]       [CENTER]        [RIGHT]]

يبلغ عرض الحاوية Div 100 ٪ (لا يوجد عرض محدد) ، ويجب أن يظل مركز DIV في الوسط بعد تغيير حجم الحاوية.

لذلك قمت بتعيين:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

لكنه يصبح:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

أي نصائح؟

هل كانت مفيدة؟

المحلول

مع ذلك CSS ، ضع divs الخاص بك مثل SO (يطفو أولاً):

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

ملاحظة يمكنك أيضا أن تطفو على اليمين ، ثم اليسار ، ثم الوسط. والشيء المهم هو أن العوامات تأتي قبل القسم "الرئيسي".

PPS غالبًا ما تريد أن تدوم في الداخل #container هذا المقتطف: <div style="clear:both;"></div> والتي سوف تمتد #container رأسياً احتواء كلا العوامات الجانبية بدلاً من أخذ طولها فقط #center وربما السماح للجوانب بطرد القاع.

نصائح أخرى

إذا كنت لا ترغب في تغيير بنية HTML الخاصة بك ، فيمكنك أيضًا القيام بها عن طريق الإضافة text-align: center; إلى عنصر الغلاف و display: inline-block; إلى العنصر المتمركز.

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

عرض حي: http://jsfiddle.net/ch9k8/

محاذاة ثلاثة divs أفقيا باستخدام Flexbox

فيما يلي طريقة CSS3 لمحاذاة divs أفقيا داخل div آخر.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

JSfiddle

ال justify-content يستغرق الخاصية خمس قيم:

  • flex-start (إفتراضي)
  • flex-end
  • center
  • space-between
  • space-around

في جميع الحالات ، تكون DIVs الثلاثة على نفس الخط. للحصول على وصف لكل قيمة انظر: https://stackoverflow.com/a/3385609/3597276

فوائد Flexbox:

  1. كود الحد الأدنى ؛ فعال جدا
  2. التوسيط ، عموديًا وأفقيًا ، بسيط وسهل
  3. أعمدة الارتفاع المتساوية بسيطة وسهلة
  4. خيارات متعددة لمحاذاة العناصر المرنة
  5. إنه مستجيب
  6. على عكس العوامات والجداول ، التي توفر سعة تخطيط محدودة لأنها لم تكن مخصصة أبدًا لتخطيطات البناء ، فإن Flexbox هي تقنية حديثة (CSS3) مع مجموعة واسعة من الخيارات.

لمعرفة المزيد عن زيارة Flexbox:

دعم المتصفح: يتم دعم Flexbox من قبل جميع المتصفحات الرئيسية ، باستثناء أي <10. تتطلب بعض إصدارات المتصفح الحديثة ، مثل Safari 8 و IE10 ، بادئات البائع. للحصول على طريقة سريعة لإضافة البادئات استخدام Autoprefixer. مزيد من التفاصيل في هذا الجواب.

خاصية تعويم لا تستخدم في الواقع لمحاذاة النص.

يتم استخدام هذه الخاصية لإضافة عنصر إلى اليمين أو اليسار أو الوسط. 

div > div { border: 1px solid black;}
<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

إلى عن على float:left سيكون الإخراج [First][second][Third]

إلى عن على float:right سيكون الإخراج [Third][Second][First]

هذا يعني أن الخاصية العائمة => ستضيف الخاصية اليسرى العنصر التالي إلى يسار واحد ، نفس الحالة مع اليمين

كما عليك أن تفكر في عرض العنصر الأصل ، إذا تجاوز مجموع عرض عناصر الطفل عرض العنصر الأصل ، فسيتم إضافة العنصر التالي في السطر التالي

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

الثانية الأولى

ثالث

لذلك تحتاج إلى النظر في كل هذه الجوانب للحصول على النتيجة المثالية

أنا أحب قضباتي ضيقة وديناميكية. هذا ل CSS 3 و HTML 5

  1. أولاً ، يعد تحديد العرض إلى 100px محدودًا. لا تفعل ذلك.

  2. ثانياً ، سيعمل ضبط عرض الحاوية على 100 ٪ بشكل جيد ، حتى يتحدث عن كونه شريط رأس/تذييل للتطبيق بأكمله ، مثل التنقل أو الاعتمادات/شريط حقوق الطبع والنشر. يستخدم right: 0; بدلا من ذلك السيناريو.

  3. أنت تستخدم المعرف (التجزئة #container, #left, ، إلخ) بدلاً من الفصول (.container, .left, ، إلخ) ، وهو أمر جيد ، إلا إذا كنت تريد تكرار نمط أسلوبك في مكان آخر في الكود الخاص بك. سأفكر في استخدام الفصول بدلاً من ذلك.

  4. بالنسبة إلى HTML ، لا حاجة إلى تبديل الطلب: اليسار ، الوسط ، واليمين. display: inline-block; يعمل على إصلاح هذا ، وإرجاع التعليمات البرمجية الخاصة بك إلى شيء أكثر نظافة ومنطقي للترتيب مرة أخرى.

  5. أخيرًا ، تحتاج إلى مسح العوامات حتى لا تعبث بالمستقبل <div>. أنت تفعل هذا مع clear: both;

كي تختصر:

لغة البرمجة:

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

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

نقطة المكافأة إذا استخدمت Haml و Sass ؛)

هامل:

.container
  .left
  .center
  .right
  .clear

ساس:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

هناك العديد من الحيل المتاحة لمحاذاة العناصر.

01. استخدام Table Trick

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

02. باستخدام خدعة فليكس

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

03. باستخدام خدعة تعويم

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

يمكن القيام بذلك بسهولة باستخدام CSS3 Flexbox ، وهي ميزة سيتم استخدامها في المستقبل (متى <IE9 ميت تماما) من قبل كل متصفح تقريبا.

افحص ال جدول توافق المتصفح

لغة البرمجة

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

انتاج: 

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

مع Twitter Bootstrap: 

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

الإجابة المحتملة ، إذا كنت تريد الاحتفاظ بترتيب HTML وعدم استخدام Flex.

لغة البرمجة

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

رابط القلم الرمز

لغة البرمجة:

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; يعطي محاذاة مركز مثالي.

JSfiddle Demo

فعلت محاولة أخرى لتبسيط هذا وتحقيقه دون ضرورة حاوية.

لغة البرمجة 

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

يمكنك رؤيته على الهواء مباشرة JSfiddle

استخدام Bootstrap 3 أقوم بإنشاء 3 divs ذات العرض المتساوي (في 12 عمود تخطيط 4 أعمدة لكل div). وبهذه الطريقة ، يمكنك الحفاظ على وسط المنطقة المركزية حتى لو كان للأقسام اليمنى/اليمنى عرضًا مختلفًا (إذا لم تتفوق على مساحة أعمدةهم).

لغة البرمجة:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

Codepen

لإنشاء هذا الهيكل بدون مكتبات ، قمت بنسخ بعض القواعد من CSS Bootstrap.

لغة البرمجة:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

Copepen

فيما يلي التغييرات التي اضطررت إلى إجراؤها على الإجابة المقبولة عندما فعلت هذا مع صورة كعنصر مركزي:

  1. تأكد من أن الصورة محاطة داخل Div (#center في هذه الحالة). إذا لم يكن الأمر كذلك ، فسوف يتعين عليك تعيينه display إلى block, ، ويبدو أنه يركز على المسافة بين العناصر العائمة.

  2. تأكد من ضبط حجم كل من الصورة و حاويةها:

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}

يمكنك تجربة هذا:

رمز HTML الخاص بك مثل هذا:

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

ورمز CSS مثل هذا:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

لذلك ، يجب أن يكون الإخراج هكذا:

[[LEFT]       [CENTER]        [RIGHT]]

.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess

لقد فعلت ذلك بشكل صحيح ، تحتاج فقط إلى مسح عواماتك. ببساطة أضف 

overflow: auto;

إلى فئة الحاوية الخاصة بك.

الحل الأسهل هو صناديق جدول مع 3 أعمدة ووسط هذا الجدول.

لغة البرمجة:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

CSS:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top