Question

首先。在编写网页设计方面，我是一个新手。上次我创建一个网站是在20年前，我可以说发生了很多事情： - ）

关于主题。我试图创建几个盒子。我希望他们都留在中间，他们之间有一点空间。他们需要像这样连续下去：

[] [] [] []

我的问题是，当我添加第三个和第四个时，它们会与顶部框重叠！

链接到小提琴上的代码：

http://jsfiddle.net/2cZtH/7/ enter code here

Answer 1

你可以将它们放在一张桌子中：

actions

将<table> <tr> <td> Top Left Content </td> <td> Top Right Content </td> </tr> <tr> <td> Bottom Left Content (Blank) </td> <td> Bottom Right Content </td> </tr> </table>放入表格单元格中，并删除其绝对定位属性，因为这样可以防止表格单元格正确调整大小。

Answer 2

你走了。 http://jsfiddle.net/2cZtH/8/

你不应该真正使用position：absolute来理想地将它们从DOM中取出而你必须手动定位它们。您可以给它们一个包含div的％的宽度，并将它们向左浮动以获得相同的效果，并且更加轻松。：）

div { width:25%; float:left;   border-radius: 25px; margin-right:2.5%;
  border: 2px solid #A9B8C2;
  padding: 20px;
  height: 200px;
  background: #ECECEC; }

编辑：当然，如果您知道包含div的宽度，则可以使用设置宽度。

Answer 3

我很难理解你的代码，这是你想要创建的东西 http://jsfiddle.net/2cZtH/11/

我创建了一个重复的简单框。使用display:inline-block;按顺序堆叠它们，并在到达视口末尾时导致换行。

如果您只是尝试使用float:left创建三列，那就是您所需要的。 http://jsfiddle.net/2cZtH/15/

Answer 4

请参阅fiddle

你的HTML代码有很多问题导致它出现故障。我已经改变了你的代码。请参阅下面的更改代码。请用这个替换你的HTML。

你的CSS的主要问题是你使用position:absolute;使它看起来像那样。所以我已将其更改为position:relative。

您可以详细了解CSS定位 here ..

HTML

<div class="container">
    <div class="right">
        <p id="rcorners"> <a href="#" class="fillthediv">
    <img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
    <span class="fulldivhead"> Alger i våra kar</span>
    <br /><br/>
    <span class="fulldivp"> En artikel som beskriver ingående de vanligaste algerna i våra akvarier. Med många bra bilder tillsammans med Beskrivning/Orsak/Bekämpning gör denna artikel till 
    förmodligen den mest omfattande på webben.
    <br/><br/>
    </span>
    </a>

        </p>
    </div>
    <div class="right">
        <p id="rcorners"> <a href="#" class="fillthediv">
    <img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
    <span class="fulldivhead">De vanligaste växtbristerna</span>
    <br /><br/>
    <span class="fulldivp"> 
    <br/><br/>
    </span>
    </a>

        </p>
    </div>
    <div class="right">
        <p id="rcorners"> <a href="#" class="fillthediv">
    <img alt="Non-technical" style="float: left;margin-right:10px; width:128px; height:128px" src="images/Artiklar/Alger.jpg" />
    <span class="fulldivhead">De vanligaste växtbristerna</span>
    <br /><br/>
    <span class="fulldivp"> 
    <br/><br/>
    </span>
    </a>

        </p>
    </div>
</div>

Answer 5

问题解决了！通过使右框相对并编辑margin-right加margin-top。加上链接后清除代码。谢谢！

添加第三个时，<div>框重叠

5 个答案:

请参阅fiddle