Question

索引代码

     <div id="pageMiddle">
    <div id="midleft">This is a test to make sire everything is ok. This text will be removed once the test is complete and everything is working fine.</div>

<div id="midmid"><?php include_once("modules/twitter_twr.php"); ?></div>

<div id="midright"><?php include_once("modules/random_profiles.php"); ?></div>

CSS

    #pageMiddle {
     width: 1000px;
     margin: 0px auto;
     height: 900px; 
}
#pageMiddle > #midleft {
     width: 200 px;
     margin: 0px;
     float: left;
}
#pageMiddle > #midmid {
     width: 600px;
     margin: 0px;
     display: inline;
}
#pageMiddle > #midright {
     width: 200px;
     margin: 0px;
     float: right;
}

我尝试了很多方法来做到这一点。我似乎根本无法理解它。我试图得到它所以所有的div很好地坐在一起，所以我能够基本上填充索引页面的内容。感谢您抽出时间来看看它，我希望您能够在我吮吸CSS时纠正错误。

Answer 1

的 DEMO
实际上这就是你所需要的：

#pageMiddle { width: 1000px; margin: 0px auto; height: 900px; } #pageMiddle > div{ float: left; }

比你可以设置你的宽度：

#midleft, #midright { width: 200px; } #midmid { width: 600px; }

_{注意没有必要使用#pageMiddle > #midleft因为ID已经是每页唯一。}

Answer 2

此处的问题是display:inline不允许您在CSS中使用width属性。

这应该用现在的代码修复它：

#pageMiddle {
     width: 1000px;
     margin: 0px auto;
     height: 900px; 
}
#midleft {
     width: 200px;
     margin: 0px;
     display: block;
     float: left;
}
#midmid {
     width: 600px;
     margin: 0px;
     display: block;
     float: left;
}
#midright {
     width: 200px;
     margin: 0px;
     display: block;
     float: left;
}

此外，由于你正在使用浮点数，通常最好让你的浮点数位于非浮点数上方（如果你想要实现单行）。您的HTML语法应如下所示：

<div id="pageMiddle">
    <div id="midleft">This is a test to make sire everything is ok. This text will be                 removed once the test is complete and everything is working fine.</div>

    <div id="midmid"><?php include_once("modules/twitter_twr.php"); ?></div>

    <div id="midright"><?php include_once("modules/random_profiles.php"); ?></div>
</div>

这是小提琴（添加背景，以便您可以看到div之间的区别）： http://jsfiddle.net/g732A/1/

请注意，这不是最佳编写列的方法，但它确实实现了您想要做的事情。

将3个div放在一起

2 个答案: