我有这个完美编码的布局:http: //jsfiddle.net/4Xbc8/
这正是我想要的,但是如果我在div
s 中添加任何单词,它们都会不合适。
我有点理解div
s 是如何工作的,但我不知道为什么div
s 中的内容不合适。
知道为什么吗?
body
{
background-color: blue;
width: auto;
overflow: auto;
white-space:nowrap;
}
#mainwindow
{
margin-top: 15px;
max-height: 600px;
background-color:black;
height: 600px;
width: 3000px;
padding: 5px 5px 5px 5px;
}
#search_tile
{
background-color: yellow;
height: 50px;
width: 350px;
display: inline-block;
}
#timeline_tile
{
margin: 5px;
position:relative;
width: 250px;
height: 580px;
background-color: white;
display: inline-block;
}
#conversations_tile
{
top: -210px;
position:relative;
width: 250px;
height: 375px;
background-color: gray;
display: inline-block;
}
#source_tile
{
background-color: yellow;
width: 450px;
height: 200px;
display: inline-block;
position:relative;
left: -255px;
}
<div id="mainwindow"> <!-- main window wrapper -->
<div id="leftarea" class="leftarea"> <!-- LEFT AREA -->
<div id="timeline_tile" class="timeline_tile"><div></div></div>
<div id="conversations_tile" class="conversations_tile"></div>
<div id="source_tile" class="source_tile"></div>
</div>