如何将两个 div 并排排列？答案

【问题标题】：How to arranging two div beside each other?如何将两个 div 并排排列？
【发布时间】：2015-05-05 06:18:38
【问题描述】：

我有两个 div，我要把它们并排排列，我为它们设置了 display inline-block 但没有工作，其中一个比另一个更高级。

我想要这个：

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;

}

但无法正常工作且未以上述样式显示（图片）。 DEMO

当我向右 div (#second-div) 添加一些内容时，它会出现并从右到左排列左 div (#ads-div)。 DEMO

请帮忙告诉我正确的 CSS 和 HTML

【问题讨论】：

标签： html css

【解决方案1】：

将vertical-align:top 添加到类.inline-st

.inline-st {
display: inline-block;
position: relative;
vertical-align: top;
}

【讨论】：

天哪，谢谢。我在想垂直对齐只是在显示表上工作

【解决方案2】：

将两个 div 浮动到左侧，查看 fiddle

  #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;
    }

【讨论】：

是的，真的谢谢你，但是stackoverflow.com/a/30045606/4865041 更好，谢谢了
不用担心，很高兴您找到了有效的答案并解决了您的问题！如果这个答案有帮助，请考虑投赞成票

【解决方案3】：

将 float:left 添加到第二个 div，它会很好地工作

#second-div {
background: none repeat scroll 0 0 green;
float: left;
height: 235px;
width: 388px;

【讨论】：