كيف يمكن ترتيب العناصر أفقياً في Css ؟

يمكنك استخدام الخاصية display في تحديد مواضع العناصر في الصفحة ، فمثلاً يمكنك فعل التالي ، نضع العناصر داخل وسم div ومن ثم إعطاء الوسم div الخاصية display

<div>
  <h1>Hello</h1>
  <img src="hello.png">
</div>

نقوم بإعطاء الوسم div الخاصية display

div {
  display: flex;
}

نظام تقسيم العناصر باستخدام flex  سوف يساعدك صنع صفحات ويب متجاوبة مع مختلف الشاشات ومرنة وسهلة التعديل عليها .

للإطلاع أكثر حول الخاصية display على موسوعة حسوب من هنا وللإلاطلاع على الخاصية flex من هنا . 

ويمكنك الإطلاع على هذا المقال لرؤية كيف يتم محاذة العناصر 

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

	...
	<!-- HTML -->
	<div class="row">
	  <p class="col">Hello</p>
	  <p class="col"> World!</p>
	  <!--له عرض محدد col العمود  -->
	</div>
	...
	/* CSS */
	.row { /* توسيط المحتويات بعد أخذ كامل عرض الشاشة */
	    width: 100%;
	    text-align: center;
	}  
	.col {
	    width: 100px; /* يمكنك التحكم بعرض العمود كما التحكم بطولة*/
	    display: inline-block;
	    /* هذا هو الجزء الأكثر أهمية الذي يبرمج الأعمد لتصطف أفقياً*/
	}
	...