Question

我有两个文件，一个叫做header.php，另一个叫做index.php。

header.php看起来像这样：

<div class="long_box">**Small long box**</div>

index.php看起来像这样：

<?php
include('header.php');
?>

<div class="content">**Big box**</div>

这是CSS文件：

.long_box {
    background-color:#f4f4f4;
    width:200px;
    min-height:400px;
    padding:10px;
    margin:10px;
    border:1px solid #bbbbbb;
    box-shadow: inset 0 1px 0 #fefefe; }
.content {
    background-color:#f4f4f4;
    width:515px;
    min-height:800px;
    padding:10px;
    margin:10px;
    float: left;
    border:1px solid #bbbbbb;
    box-shadow: inset 0 1px 0 #fefefe; }

所以我在header.php中使用“long_box”，在index.php中使用“content”，然后在index.php中包含header.php，它给了我这个页面：http://gyazo.com/5bb4375f05ff5c9b3c3f8c47e7d3a0c0.png

现在，我想在右侧一直添加第三个方框，就像在这个红色方框为的图像中：http://gyazo.com/ea2f330cab8cc07508fa797a2ad5de3e.png

每次我决定包含header.php时，我想要包含第三个框。

如果有人可以帮我解决这个问题，我真的很感激。

Answer 1

您只需使用float: left;

浮动3个方框即可

jsFiddle

每当其中一个浮动元素出现在另一个浮动元素下面时，可能是因为你的第三个框不适合屏幕。

请注意，我使用了其他width，因此它可以放在我的屏幕上

<强>更新

每当首先调用位于最右侧的元素时。您可以使用float: right;

jsFiddle

Answer 2

我相信你在这里要做的是检查是否包含header.php，如果是这样，请将你的新盒子包括在内。（或者以较新者为准）。

你可以试试file_exists如下：

if(file_exists('header.php'))
    include 'aside.php';

在这里找到更多信息，这可能对您有用： How to include only if file exists

PS。正如cederlof所说，也将你的内容属性改为class not style。

Answer 3

好的......所以这里是小提琴 http://jsfiddle.net/logintomyk/DgsH3/

<强>的header.php

<div class="long_box">**Small long box**</div>
<div class="third_box"> Third box </div>

<强>的index.php

<div class="content">**Big box**</div>

<强> CSS

.long_box {
    background-color:#f4f4f4;
    width:18%;
    min-height:400px;
    padding:10px;
    margin:10px;
    border:1px solid #bbbbbb;
    box-shadow: inset 0 1px 0 #fefefe; 
    float:left;
}


.third_box{
    background-color:#f4f4f4;
    width:18%;
    min-height:400px;
    padding:10px;
    margin:10px;
    border:1px solid #bbbbbb;
    box-shadow: inset 0 1px 0 #fefefe; 
    float:right;

}


.content {
    background-color:#f4f4f4;
    width:40%;
    min-height:100%;
    padding:10px;
    margin:10px;
    border:1px solid #bbbbbb;
    box-shadow: inset 0 1px 0 #fefefe; 
    margin:0 auto;

}

使用％age作为宽度......考虑到响应式设计，这是一个更好的主意!! ;）

如何定位盒子？

3 个答案:

jsFiddle

jsFiddle