Question

这可能听起来非常愚蠢，但我是网站设计的新手。

是否可以在div中使用div？

我想使用第一个div来创建页脚并给它一个背景颜色，并保持一个大小（1920 x 300），这就是全部。然后我希望下一个div允许我列出一些链接到其他页面并定位它们（这是第二个div的唯一任务）和第三个div来保存一些图像并定位它们（第三个div唯一的任务）

或者我是从一个小山丘上建造一座山并且错过了一个更简单的方法来做到这一点？

Answer 1

我对你有无限的同情，因为我在大约一年前经历了同样的过程。阅读上面提到的所有优秀建议，但最好的方法是学习它。您可以使用jsfiddle.net，或只使用记事本，将html文件保存在您的计算机上并使用浏览器点击它。你会看到各种“有趣”的行为。我有很多关于更改div上的一个像素的例子，你看页面看毕加索的立体派画作!!

我把一点fiddle放在一起供你玩。请注意，一旦HTML“完成”，您将花费大部分时间在代码的CSS部分。祝你好运！

CSS

.container {
  width:300px;
  height: 300px;
  background-color: red;
}
.insidediv1 {
  width: 250px;
  height: 100px;
  background-color: blue;
}
.insidediv2 {
  width: 250px;
  height: 100px;
  background-color: orange;
  float: right;
}
.insidediv3 {
  width: 250px;
  height: 50px;
  background-color: green;
  float: right;
}
.yourimage {
  width: 75px;
  height: 75px;
  background-color: white;
  margin: 10px auto;
}
.footer {
  width: 300px;
  height: 100px;
  background-color: yellow;
}

HTML

<div class='container'>
    <div class='insidediv1'></div>
    <div class='insidediv2'>
        <div class='yourimage'>IMAGE</div>
    </div><!--end insidediv2-->
    <div class='insidediv3'></div>
</div><!--end container-->
<div class='footer'>Footer</div>

Answer 2

是的，这是可能的.. 了解更多信息查看此链接可能会有所帮助.. http://gostats.com/resources/css-div-tutorial.html

...

http://www.w3schools.com/tags/tag_div.asp

...

http://www.echoecho.com/csslayers.htm

Answer 3

是的，这绝对是可能的。这是HTML和css的目的。

在您浏览数以千计的错误教程之前，请考虑一下这类问题的一些资源：

nettuts有许多不同的教程。
css-tricks，Chris Coyier是一个有各种页面布局相关信息的忍者。

如果你真的热衷于实际的div，那么请看一些布局框架。这些让你很容易想象出你的“div中的div”想法您编码HTML。

Twitter Bootstrap提供了许多用于构建页面的预制元素，这种方式在布局中提供了大量的结构和一致性。
Zurb Foundation提供的结构元素更少，灵活性更高，但它确实可以让您更多地编写css到 make 的代码，它看起来就像你想要的那样..

在Bootstrap 3中有一个非常简单的元素布局示例look at this jsbin（并调整浏览器窗口的大小）。只需点击右上角的“修改”按钮即可查看其背后的代码。

无论你做什么，都不要过度使用标记。为您需要显示的内容保持标记尽可能简单，然后使用基于布局的css规则将各个部分放在您想要的位置。这是所有上述选项的“布局”方面将有助于它有意义的地方。

希望有所帮助。：）

div内的div（理论）

3 个答案: