Question

我有一个长度为2000px的网页，但是我想把它分成4个不同的部分（即每个500px），所以我可以用不同的设计添加不同的内容。但我不知道该怎么做。我也希望给出超链接。

Answer 1

听起来你需要一些基础知识。

您的网页结构是HTML，而风格元素则由CSS决定。因此，您需要在包含<div></div>内部的四个逻辑分区（a.k.a。<div></div>），如下所示：

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

div是一种称为块级元素的东西，它会自动扩展到其容器的整个宽度（即：100％）。您希望内部div元素具有相同的宽度，并且由于其中有四个元素，您可以进行一些数学运算。

100％/ 4 =您希望每个div的宽度。

<div>
    <div style="width:25%;"></div>
    <div style="width:25%;"></div>    
    <div style="width:25%;"></div>
    <div style="width:25%;"></div>
</div>

您会注意到这并没有按预期工作，因为div元素将是您想要的宽度，但只能叠加在一起。为了使它们彼此相邻，您可以使用display:inline-block;将块级别更改为块和内联之间的内容。

<div>
    <div style="width:25%; display:inline-block;"></div>
    <div style="width:25%; display:inline-block;"></div>    
    <div style="width:25%; display:inline-block;"></div>
    <div style="width:25%; display:inline-block;"></div>
</div>

这几乎就是你想要的，除了你会发现div元素之间存在一些差距，这实际上是HTML代码中保留的空格（<div></div>之间的换行符）。有几种方法可以摆脱这种情况。在我看来，最简单的是在元素之间添加空白注释，如下所示：

<div>
    <div style="width:25%; display:inline-block;"></div><!--
    --><div style="width:25%; display:inline-block;"></div><!--    
    --><div style="width:25%; display:inline-block;"></div><!--
    --><div style="width:25%; display:inline-block;"></div>
</div>

这是在HTML元素中使用CSS样式，但你应该真正放置CSS in a stylesheet and reference it in the page。

Answer 2

一个可怕的答案是框架;一个中等不好的答案是css divs

<div class="bottom">
  <div id="area1" style="float: left; width: 25%;"></div>
  <div id="area2" style="float: left; width: 25%;"></div>
  <div id="area3" style="float: left; width: 25%;"></div>
  <div id="area4" style="float: left; width: 25%;"></div>
</div>

现在当你说超链接..你的意思是在你点击页面的迷你部分，它扩展到它的那一部分？因为你可能不得不为它做一些jquery hack

$("#area1").click(function(){
$("#area1").css("width", "100%");
$("area2").css("width", "0%");
$("area3").css("width", "0%");
$("area4").css("width", "0%");
});

（上面应该将你点击的季度的点击数量调整为100，同时收缩其他季度。然后你会根据id或类等对css中的个别div进行设置。

Answer 3

使用bootstrap的简单方法，提供已经生成列和响应功能。你不想使用下一个选项是我们可以使用css或frames.like如上面的答案

如何在不同的部分划分网页？

3 个答案: