نمایش سه div در کنار هم در یک لاین

حل شده 

وبمستر

توسط mahbobe-prog در 5 سال پیش
0 89.5k 3 5 سال پیش
mahbobe-prog c0der
1

با سلام
من میخوام سه div  کنار هم و به هم چسبیده باشند ولی div  سمت راست صفحه padding-rightمیگیره و نمیذاره که به div  وسطی بچسبه روش هایی که میدونستم رو به کار بردم درست نشد لطفا جوابمو بدین خیلی لازمش دارم

/*CSS*/
.content
{
	padding:0 ;
	margin:0 auto ;
	background-color: #f3f3f3 ;
	border-top: 5px solid #d6d6d6 ;
	border-radius: 5px ;
	margin-top: 29px ;
	height: 275px ;
	width:100% ;}
/*HTML*/
        <div class="row">
        	<div class="col-md-2" style="float:right ;padding-right:0 !important ;">
                <div style="">
                    <img src="pic/rightcon.png" >
                </div>
            </div>
            <div class="col-md-8" style="padding-left:0 !important ;padding-right:0 !important">
                <div class="content">
                    THIS IS CONTENT
                </div>
            </div>
            <div class="col-md-2" style="padding:0">
                <div>
                    <img src="pic/leftcon.png">
                </div>
            </div>
            <div style="clear:both"></div>	            
		</div>
آخرین ویرایش: 01-02-2015 ساعت 14:16، توسط Daniel

پاسخ ها

3

تگ cpu چه ربطی داره به موضوع؟
عنوان پیشنهادی برای موضوع: نمایش سه div در کنار هم در یک لاین
تگهای پیشنهادی: html div , نمایش div ها در کنار هم , نمایش div ها در یک لاین ,


از float باید استفاده کنی

روش اول:

<div class="left"> Some content </div>
<div class="right"> Some other content </div>
<div class="middle"> This should fill the space </div>
.left {
    float: left;
    background-color: #ddd;
}
.middle {
    background-color: yellow;
    display: block;
    overflow:hidden;
}
.right {
    float: right;
    background-color: #ddd;
}

روش دوم:

<div id="wrapper">
<div class="left"> Some content  Some content  Some content  Some content  Some content </div>
<div class="middle"> Some content  Some content  Some content  Some content  Some content </div>
<div class="right"> Some content  Some content  Some content  Some content  Some content </div>
</div>
#wrapper {
  margin: 0 auto;
  width: 97%;
  background: red;
  overflow: hidden;
}

.left,
.middle,
.right {
  width: 33.333%;
}

.left{background: blue; float: left;}
.middle{background: green; float: left;}
.right{background: yellow; float: right;}

JSBIN

آخرین ویرایش: 01-02-2015 ساعت 10:47، توسط C0der
0

سلام ممنون از پاسختون
ایراد کارم رو چند روز پیش پیدا کردم و حل شد .
بابت انتخاب نامناسب تگ ها باید بگم من اون روز شدیدا عجله داشتم وباید زودتر پست رو میذاشتم 
امتیاز منفی واسه چی؟؟!!!

1

من مدیر نیستم اما خوب معمولا اینا چیزیه که همه جا باید رعایت بشه حالا 10 ثانیه میتونستید بیشتر وقت بذارید.

آخرین ویرایش: 04-02-2015 ساعت 22:20، توسط C0der

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.