سلام آقای خسروجردی،
من کد های زیر رو استفاده کرده ام اما وقتی مثل شما سه ستون رابه ترتیب از بالا به پایین:
float: left;
float:none;
float:right;
انجام میدم اما اصلا شبیه شما نمی شه لطفا بررسی داشته باشید ببینمعیب کار کجاست؟؟
کد هایی رو که نوشتم ضمیمه می کنم که ببینید.ممنون
مخصوص اعضای ویژه 
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin: 0px;
}
header{
background-image: url(images/dark_tint.png), url(images/bokeh_car_lights_bg.jpg);
background-size: 1023px;
cursor: default;
line-height: 6em;
}
header h1{
margin: 0px;
display: inline-block;
font-weight: 700;
line-height: inherit;
position: relative;
left: 2.42em;
font-size: 20px;
}
a#txt-Head{
text-decoration: none;
color:white;
}
a#txt-Head:hover{
text-decoration: underline;
}
header nav ul{
position: absolute;
margin: 0px;
padding: 0px;
top: 1px;
right: 54px;
height: inherit;
line-height: inherit;
}
li{
list-style: none;
display: inline-block;
color: rgba(255, 255, 255, 0.5);
margin-left: 31.5px;
height: inherit;
line-height: inherit;
}
.t-Hover:hover{
color:white;
transition: color 0.2 ease-in-out;
}
.btn{
background-color: #fff;
display: inline-block;
color: #444;
padding: 0 1em;
height: 2.25em;
line-height: 2.25em;
text-decoration: none;
border-radius: 30px;
}
#banner{
text-align: center;
color: white;
}
#banner ul{
margin: 0;
position: relative;
right: 36px;
padding-bottom: 187px;
}
#banner #title-Header{
padding: 50px 0 0 0;
margin-bottom:0;
font-size: 3.67em;
}
#txt-Header{
padding: 0;
font-size: 22px;
margin: -18;
}
.join-Us{
background-color: #3cadd4;
color: #fff;
padding: 0.1em 1.98em;
font-size: 20px;
height: 52px;
}
.join-Us:hover{
background-color: #5fc0e0;
transition: color 0.2s ease-in-out;
}
section#one{
background-color: #F5F5F5;
text-align: center;
}
.c-s-one{
margin-top: 0;
font-size: 44px;
padding-top: 91px;
color: #474747;
margin-bottom: 6px;
}
.c-c-s-one{
color:#858585;
margin-top: 11px;
font-size: 22px;
}
.card{
width: 250px;
height: 250px;
border-radius: 4px;
text-align: center;
border: 1px solid rgba(144, 144, 144, 0.25);
background-color: #fff;
}
.card-left{
float: left;
}
.card-right{
float: right;
}
</style>
</head>
<body>
<header>
<h1>
<a href="#" id="txt-Head">Transit</a>
</h1>
<nav>
<ul id="tool-Bar">
<li class="t-Hover">Home</li>
<li class="t-Hover">Generic</li>
<li class="t-Hover">Elements</li>
<li><a href="#" class="btn">Sign Up</a></li>
</ul>
</nav>
<section id="banner">
<h2 id="title-Header">Hi. This is Transit.</h2>
<p id="txt-Header">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<ul>
<li>
<a href="#" class="btn join-Us">Lorem ipsum dolor</a>
</li>
</ul>
</section>
</header>
<section id="one">
<h2 class="c-s-one">Consectetur adipisicing elit</h2>
<p class="c-c-s-one">Lorem ipsum dolor sit amet, delectus consequatur, similique quia!</p>
<div class="card card-left"></div>
<div class="card"></div>
<div class="card card-right"></div>
</section>
</body>
</html>با سلام خدمت شما همراه عزیز
ابزار انلاین مقایسه کد هست سرچ بفرمایید دقیق با کدهای بنده مقایسه کنید متوجه ایراد کار میشید
دوست عزیزم من تمامی کدهارو در اختیارتون قرار دادم در بخش های جلوتر هست دانلود بفرمایید
ببینید مشکل دقیقا اینجاست که div وسط که float نداره میره زیر div که float دارای مقدار left است.مشکل اینه مال شما میاد وسط ولی من نه میره زیر اون یکی؟
خب حتما یک بخشی از کدهارو اشتباه نوشتید که این مشکل بوجود اومده
تنها راه متوجه شدن ایراد کمک از اینسپکت هست یا مقایسه با کدهای بنده
من اومد در یک صفحه جداگانه سه تا تگ div گذاشتم و به اولی float:left و به وسطی هیچی ندادم و به آخری هم float:right دادم باز هم اینجوری شد.آیا کد های بخش دیگر تاثیری روی بخش داره یا نه؟چون دیگه نمی دونم مشکل کجاست.
در آخر اومدم هر سه div رو در یک div گذاشتم بعد هرسه div رو به چپ شناور کردم بعد در تگ نگهدارنده خاصیت after رو clear:both گذاشتم.
کد های html:
<div class="card-continer">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
کدهای css:
.card{
width: 250px;
height: 250px;
border-radius: 4px;
text-align: center;
border: 1px solid rgba(144, 144, 144, 0.25);
background-color: #fff;
float: left;
}
.card-continer::after{
content: "";
display: block;
clear: both;
}در هر صورت ممنون.از راهنمایی شما
بله این هم یک روش عالی هست
تلاش رو خودتون انجام دادید منم همینو میخواستم دقیقا
این دیگه تا اخر توو ذهنتون میمونه
موفق و سربلند باشید