如何在同一行插入div答案

【问题标题】：How to insert divs on the same line如何在同一行插入div
【发布时间】：2014-04-29 09:29:33
【问题描述】：

我试图在同一行插入 4 个 div，但它们每一个都依次插入。我正在努力，但我找不到问题。我可以通过边距功能将块移动到好位置，但我认为有更好的方法。

现在看起来： picture

#recent_work {
    width:952px;
    margin:0 auto;
    height:auto;
    position:relative;
    padding-top:15px;

}

#recent_work p:first-child {
    font-family:Montserrat;
    font-size:16px;
    color:#353c3e;
    width:238px;
}

#recent_work p:nth-child(2) {
    font-family:Montserrat;
    font-size:12px;
    color:#8f8f8f;
    width:190px;
    line-height:25px;
}

.grey_block {
    float:right;
    background-color:#eaeaea;
    width:230px;
    height:489px;

}

.orange_block {
    width:230px;
    height:205px;
    background-color:#e05d41;
}

.white_block {
    width:230px;
    height:281px;
    background-color:#FFF;
}



<div id="recent_work">
            <p>RECENT WORK</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet laoreet leo at dictum.</p>
            <div class="grey_block">
                <div class="orange_block">
                    <img src="img/1.png"/>
                </div>
                <div class="white_block">
                </div>
            </div>
        </div>

【问题讨论】：

Getting 2 divs on the same line 的可能副本，在许多 others 中
您可以使用span 而不是span，它不会添加新行。请为它创建一个 Fiddle 演示，jsfiddle.net

标签： html css position block margin

【解决方案1】：

您应该根据最终想要达到的实际结果来制作 div display: inline-block 或 float: left。

【讨论】：

【解决方案2】：

以您的风格p 元素占据整个宽度，这就是为什么图像就在下方。

由于父 div 已经有relative position，所以您可以将absolute position 设置为子 div。

.grey_block {
  position:absolute; /*Added line*/
  top:0; /*star from top*/
  right:0; /*Start from right*/
  background-color:#eaeaea;
  width:230px;
  height:489px;
}

检查Demo。

【讨论】：

【解决方案3】：

你可以使用

position:relative top:somepx left:somepx;

这将帮助你实现你的目标..只需给一些像素到顶部或左侧..

【讨论】：