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

حل شده 

وبمستر

توسط mahbobe-prog در 3 سال پیش
0 2.4k 3 3 سال پیش
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

خوش آمدید

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

لطفا ابتدا لاگین کنید