Question

我有main_window div宽800像素，高550像素，然后有两个div应该在它旁边，troubleshooting_area和timeline div，这两个组成550高，但需要浮动到主窗口的右侧下面的两个div应该在主窗口旁边，我怎样才能实现呢？

这是一个演示http://jsfiddle.net/S8RC3/3/

<div class="appview_fullscreen app_ama">
 <center><strong>Auto Mechanics Alliance</strong> </br>
    <i>let us come together and become one</i>
 </center>
<div class="main_area">
    <div class="tabs_area">

    </div>
    <div class="main_window">

    </div>
    <div class="troubleshoot_area">

    </div>
    <div class="timeline">

    </div>
 </div>


</div>


body
{
    width: 100%;
    height: 100%;
    margin: 0px;
}
.appview_fullscreen
{
    width: 1005px;
    background-color: black;
    color: white;
    font-size: 20px;
    margin: 0px;
    padding: 2px;
}
.main_area
{
    border: 2px solid green;
    padding: 2px;
    margin: 0px;
}
.tabs_area
{
    border: 1px solid green;
    height: 20px;
}

.main_window
{
    min-height: 550px;
    border: 1px solid green;
    width: 800px;
    margin: 2px 1px 1px 1px;
}
.troubleshoot_area
{
    border: 1px dotted green;
    height: 200px;
    width: 200px;
}
.timeline
{
    border: 1px solid green;
    height: 350px;
    width: 200px;
}

Answer 1

在你的情况下，我只想添加：

position: absolute;
top: 76px;
left: 808px;

到您的.timeline和.troubleshoot-area课程。

您可以在此处看到更新的小提琴：http://jsfiddle.net/S8RC3/4/

Answer 2

尝试这些方法。

CSS

body
{
    width: 99%;
    height: 100%;
    margin: 0px;
}
.appview_fullscreen
{
    width: 1005px;
    background-color: black;
    color: white;
    font-size: 20px;
    margin: 0px;
    padding: 2px;
}
.main_area
{
    border: 2px solid green;
    padding: 2px;
    margin: 0px;
}
.tabs_area
{
    border: 1px solid green;
    height: 20px;
}

.main_window
{
    min-height: 550px;
    border: 1px solid green;
    width: 800px;
    margin: 2px 1px 1px 1px;
    display:inline-block;
}
.troubleshoot_area
{
    border: 1px dotted green;
    height: 200px;
    width: 200px;
    position: absolute;
    top: 76px;
    left: 808px;
}
.timeline
{
    border: 1px solid green;
    height: 350px;
    width: 200px;
    float:right;
    position: absolute;
    top: 76px;
    left: 808px;
}

DEMO Fiddle

如何在左边放置一个div，在右边放置两个div

2 个答案: