Question

我正在尝试在同一行上插入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>

Answer 1

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

Answer 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 。

Answer 3

你可以使用

position:relative top:somepx left:somepx;

这将有助于你实现你的目标。只需将某个px给予顶部或左侧..

如何在同一行上插入div

3 个答案: