如何安排两个div彼此相邻？

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: 如何安排两个div彼此相邻？

我要这个:

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