-3

如何</div>使用align属性对齐 a 中的元素，如下图所示：

呸呸呸

  • e1：align="top"
  • e2：align="right"
  • e3：align="bottom"
  • e4：align="left"

编辑：所以在这种情况下，不清楚我想告诉什么。这不是作业或其他任何东西，只是想自己学习HTML / CSS。我只是在问是否align可以仅使用属性来实现这一点。

希望我正在制作的代码片段能帮助您了解我真正想要实现的目标：

<div id="container">

    <div id="nav-vbar">
    <button class="btnV" align="top"></button>
    <button class="btnV" align="bottom"></button>
    </div>

    <div id="navigation">
    </div>

    <div id="nav-hbar">
    <button class="btnH" align="left"></button>
    <button class="btnH" align="right"></button>
    </div>

    <div id="preview">
    </div>

</div>

结果我正在努力工作(grayed divs are in focus)

在此处输入图像描述

4

3 回答 3

1

首先不要使用 align 属性。在那种程度上，我什至不确定你是否能够使用它来管理它。您应该使用 CSS 和浮动，甚至内联块。

在这种情况下，您应该看看Code Academy。他们有关于 HTML、CSS 等的免费网络教程。他们也不仅仅是一些阅读，还有实际的练习。

现在......我不会给你一套完整的 HTML/CSS，因为这里几乎没有其他人会这样做，我们也不应该这样做。这个地方是为了帮助你解决问题。缺乏知识并不是代码的问题。做一些工作和谷歌搜索以及一些简单的实验来自己尝试。当您遇到实际问题时，请回来告诉我们。

也就是说，要实现这种结构，您需要 4 个 div 来管理主要的 3 列布局。一个家长，三个孩子。一个 div 包装所有其余部分，将被视为“包装器”或“容器”。其他 3 个 div 中的第一个是您的左列，第二个 div 是另一个包装器，其中包含另外 3 个 div（e1、e3 和中间的空白），然后第三个 div 是您的右列。

使用左浮动将使它们彼此对齐。

于 2013-09-17T12:41:01.763 回答
0

请不要使用该align属性。它已经过时了。您可以更好地使用 CSS。您将需要创建至少三个 parent <div>。

您可以执行以下操作：

<div class="wrapper">

    <div class="e4">
    </div>

    <div class="middle">

        <div class="e1">
        </div>

        <div></div>

        <div class="e3">
        </div>

    </div>

    </div class="e2">
    </div>

</div>

然后为它们添加样式

样式可以像

.wrapper {

}

.e4 {
float: left;
}

.e2 {
float: right;
}

.e1 {
display: block;
}

.e3 {
display:block;
}
于 2013-09-17T12:39:58.600 回答
0

用你需要的任何东西替换 500px 和 200px。

<div style="width: 500px;height: 200px;margin: 0 auto;display: table;">
    <div style="display: table-cell; vertical-align: middle;height: 100%;text-align: center;">
        content goes here
    </div>
</div>

从那个草图中理解你想要什么有点困难。给我一些关于这有多接近的反馈。因为据我所见，你可以很好地使用这样的东西：

<div style="position: relative">
    <div style="position: absolute;top: 50px;right: 100px;bottom: 50px;left: 100px;text-align: center">
        content goes here
    </div>
</div>

你需要更明确...

于 2013-09-18T11:06:57.870 回答