I have two div(s) and I am going to arrange them beside each other, I set display inline-block for them but not working and one of them is more topper than other.
我有两个div,我打算将它们排列在彼此旁边,我为它们设置了显示内联块,但没有工作,其中一个比其他更好。
I want this:
我要这个:
HTML:
<header>
THIS IS HEADER
</header>
<div id="content">
<div id="fori-div" class="inline-st">Something will come here with some tabs...</div>
<div id="send-ads" class="inline-st">
<textarea id="send-ads-textarea" placeholder="Please write here...."/></textarea>
<div id="product-list">
<a href="#">Refrence 1</a>
<a href="#">Refrence 2</a>
<a href="#">Refrence 3</a>
<a href="#">Refrence 4</a>
</div>
</div>
</div>
<footer>THIS IS FOOTER</footer>
css:
html,body{
border:0;
margin: 0;
padding: 0;
box-sizing: border-box;
direction: rtl;
}
header,footer{
background: wheat;
border-top: 3px solid red;
border-bottom: 3px solid red;
}
#content{
text-align: center;
}
.inline-st{
display: inline-block;
position: relative;
}
#send-ads{
width:613px;
height: 235px;
background: white;
border:1px solid #d6d6d6;
padding: 14px;
}
#send-ads-textarea{
width:581px;
height: 131px;
border:1px solid #dbdbdb;
resize: none;
padding:3px;
}
/*End #content> #send-ads*/
#fori-div{
height: 235px;
width:388px;
background: green;
}
#product-list{
background: red;
margin-top:41px;
height: 33px;
}
#product-list a{
width:48px;
height: 33px;
display: inline-block;
background: yellow;
}
But not working and not showing in above style (Image). DEMO
但没有工作,没有以上面的风格显示(图片)。 DEMO
And when I add some content to right div (#second-div) it will come up and arranging right to left left div (#ads-div). DEMO
当我向右div(#second-div)添加一些内容时,它会出现并向右排列到左边div(#ads-div)。 DEMO
Please help and tell me the right CSS and HTML
请帮忙告诉我正确的CSS和HTML
3 个解决方案
#1
Add vertical-align:top
to the class .inline-st
将vertical-align:top添加到类.inline-st
.inline-st {
display: inline-block;
position: relative;
vertical-align: top;
}
#2
Float both divs to the left, check out the fiddle
将两个div向左浮动,检查小提琴
#send-ads{
float:left;
width:613px;
height: 235px;
background: white;
border:1px solid #d6d6d6;
}
#second-div{
float:left;
width:150px;
height:235px;
background: red;
border:1px solid #d6d6d6;
margin-left:10px;
}
#3
add float:left to second div and it will surly work
添加浮动:左边的第二个div,它将勉强工作
#second-div {
background: none repeat scroll 0 0 green;
float: left;
height: 235px;
width: 388px;
#1
Add vertical-align:top
to the class .inline-st
将vertical-align:top添加到类.inline-st
.inline-st {
display: inline-block;
position: relative;
vertical-align: top;
}
#2
Float both divs to the left, check out the fiddle
将两个div向左浮动,检查小提琴
#send-ads{
float:left;
width:613px;
height: 235px;
background: white;
border:1px solid #d6d6d6;
}
#second-div{
float:left;
width:150px;
height:235px;
background: red;
border:1px solid #d6d6d6;
margin-left:10px;
}
#3
add float:left to second div and it will surly work
添加浮动:左边的第二个div,它将勉强工作
#second-div {
background: none repeat scroll 0 0 green;
float: left;
height: 235px;
width: 388px;