Question

我正在努力学习divs。我正在将一个站点从表格转换成div并在填写之前布置网站。这是我的小提琴：

基本上我想要网站做的是在我扩展或收缩浏览器窗口时保持居中（非常基本）。我无法让right_box与body_box内联。我尝试在我的CSS中使用right_box和top:以及left:放置position:absolute，但当我决定使用<div align="center">进行整个布局时（保留）它全部居中），right_box显然没有与其他元素保持一致。

我知道这是一个非常基本的问题，我现在只是困惑自己。任何帮助都会很棒。谢谢！

Answer 1

以下是我认为你想要做的一个简化示例。

HTML：

<div class="wrapper">
    <div class="content"></div>  
    <div class="sidebar"></div>    
</div>

CSS：

.wrapper{width:400px; height:500px; margin:0 auto; background:lightgray;}
.content{width:200px; float:left; height:200px; background:salmon;}
.sidebar{width:200px; float:left; height:500px; background:lightblue;}

Demo

以下是您的示例fixed。

#body_box{
    ...
    width:750px;
    border:1px solid black;
    float:left;
    }

#right_box{
    width:246px; /* Not 250px because your borders add another 4px */
    border:1px solid black;
    float:left;
    }

Answer 2

请参阅http://jsfiddle.net/DAM7K/10/并查看以下评论说明。

#CompleteLayout{
    width:1000px;
    height:1100px;
    border:1px solid black;
    margin: 0 auto; /* this centers it */
    overflow: auto; /* this clears the floats I added */
    }

#header{
    height:207px;
    width:998px; /* this needed to downsize for border */
    border:1px solid blue;
    }

#top_image{
    width:998px; /* this needed to downsize for border */
    height:167px;
    border:1px dotted #993300;
    }

#navbar{
    width:998px; /* this needed to downsize for border */
    height:40px;
    border:1px dotted #990000;
    }

#slideshow{
    width:998px; /* this needed to downsize for border */
    height:200px;
    border:1px dotted #990000;
    }

#body_box{
    height:686px;
    width:750px;
    border:1px solid black;
    float: left; /* added this to get right_box to sit beside */
    }

#right_box{
    height:686px;
    width:246px;  /* this needed to downsize for borders of this and body_box  */
    border:1px solid black;
    float: left; /* added this to get right_box to sit beside */
    }

将站点表单表转换为div

2 个答案: