Question

我想知道如何将两个元素并排排列到页面中心，位置绝对。但是当我努力的时候，我没有做到这一点。有关我的代码，请参阅以下链接：http://jsfiddle.net/6FnRr/

基本上这就是我想要的：

 ______________________                        _________
|                      |                      |         |
|                      |                      |         |
|                      |                      |         |
|______________________| (5px Gap here)       |_________|

在包装中，它们有position: absolute;这两个容器必须在中心并排排列，它们之间有5px的间隙。请帮帮我，我不知道怎么做。我尝试了所有我知道的事情。

Answer 1

您可能有兴趣使用display: inline-block + text-align: center; + vertical-align: top：

Fiddle

Answer 2

DEMO

试试这个css：

#work_holder {
    width: 100%;
    position: relative; /* parent should be relative */
    clear: left;
    margin-left: auto;
    margin-right: auto;
}
#work_container {
    background: #FFFF00;
    position:absolute; /* child absolute relatively to the parent*/
    width: 681px;
    height: 256px;
    float: left;
    margin-left: auto;
    margin-right: auto;
}
#work_details {
    background: #00FF00;
     position:absolute; /* child absolute relatively to the parent */
    left:686px; /* 681px + 5px;*/
    width: 223px;
    height: 256px;
    float: left;
    margin-left: auto;
    margin-right: auto;
}

Answer 3

不要绝对使用！你想浮动：左。

.myblocks {
    float: left;
}
.myfirstblock {
    margin-right: 5px;
}

确保你clear之后。

Answer 4

http://jsfiddle.net/6FnRr/3/

  #work_holder {
        width: 100%;
        position: abosulte;
    }
    #work_container {
        background: #FFFF00;
        position:absolute;
        width: 681px;
        height: 256px;
        float: left;
    }
    #work_details {
        background: #00FF00;
         position:absolute;
        left:686px;
        width: 223px;
        height: 256px;
        float: left;
    }

Answer 5

您可以将div的右侧和左侧设置为页面的中心，并为间隙添加边距。这将使间隙完全对齐在包装div的中心。这是 JSFIDDLE 。

#work_holder {
    width: 100%;
    position: absolute;
    clear: left;
    margin-left: auto;
    margin-right: auto;
}
#work_container {
    position: absolute;
    background: #FFFF00;
    width: 681px;
    height: 256px;
    right: 50%;
    margin-right: 3px;
}
#work_details {
    position: absolute;
    background: #00FF00;
    width: 223px;
    height: 256px;
    left: 50%;
    margin-left: 3px;;
}

CSS将两个DIV并排放置在中心位置。绝对的位置

5 个答案: