كيف تطفو 3 divs جنبًا إلى جنب باستخدام CSS؟


Answers

الطريقة الحديثة هي استخدام CSS flexbox ، راجع جداول الدعم .

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}
<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

يمكنك أيضًا استخدام شبكة CSS ، راجع جداول الدعم .

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}
<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

Question

أنا أعرف كيفية جعل 2 divs تطفو جنبا إلى جنب ، ببساطة تعويم واحد إلى اليسار والآخر إلى اليمين.

ولكن كيف نفعل ذلك مع 3 divs أو يجب فقط استخدام الجداول لهذا الغرض؟




تطفو لهم جميعا اليسار

تأكد من تحديد العرض الذي يمكن احتواؤه جميعًا في الحاوية الخاصة بهم (إما div أو النافذة) وإلا سيتم التفافها




تعويم جميع divs الثلاثة إلى اليسار. مثلما هو الحال هنا:

.first-div {
  width:370px;
  height:150px;
  float:left;
  background-color:pink;
}

.second-div {
  width:370px;
  height:150px;
  float:left;
  background-color:blue;
}

.third-div {
  width:370px;
  height:150px;
  float:left;
  background-color:purple;
}



إليك كيف تمكنت من القيام بشيء مماثل لهذا داخل عنصر <footer> :

<div class="content-wrapper">

    <div style="float:left">
        <p>&copy; 2012 - @DateTime.Now.Year @Localization.ClientName</p>
    </div>

    <div style="float:right">
        <p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
    </div>

    <div style="text-align:center;">
        <p>☎ (24) 3347-3110 | (24) 8119-1085&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
    </div>

</div>

CSS:

.content-wrapper
{
    margin: 0 auto;
    max-width: 1216px;
}



ولكن هل يعمل في Chrome؟

تعويم كل div وتعيين واضح ؛ على حد سواء للصف. لا حاجة لضبط العرض إذا كنت لا ترغب في ذلك. يعمل في Chrome 41 و Firefox 37 و IE 11

انقر على JS Fiddle

HTML

<div class="stack">
    <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
    </div>
        <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
                    <div class="col">
            Three
        </div>
    </div>
</div>

CSS

.stack .row { 
clear:both;

}
.stack .row  .col    {
    float:left;
      border:1px solid;

}



حاول إضافة "display: block" إلى النمط

<style>
   .left{
          display: block;
          float:left; 
          width:33%;
    }
</style>


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>



<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>

<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>

ميزة هذه الطريقة هي أنه يمكنك تعيين كل عرض عمود مستقل عن الآخر طالما تحتفظ به أقل من 100٪ ، إذا كنت تستخدم 3 × 30٪ يتم تقسيم النسبة المتبقية 10٪ كمسافة فاصلة 5٪ بين الأعمدة




Links