在html中水平放置div容器答案

【问题标题】：Placing div container horizontally in html在html中水平放置div容器
【发布时间】：2015-03-31 05:07:43
【问题描述】：

我对 HTML 完全陌生，并且不知道如何放置对齐 div 标签或水平放置容器。默认情况下，div 容器是垂直放置的。

根据我在不同链接中发现的嵌套divs 看起来像这样：

 <div id="ParentContainer" style="height:100%; width:100%; overflow: hidden;"> 
    <div id="chart_div" style="float: left; width:50%;">Left Side Menu</div>
    <div id="chart_div2" style="float: left; width:50%; ">Random Content</div>
   </div>

如果我是这样做的，我该如何参考chart_div和chart_div2？

在此之前，我可以直接使用 div id 引用它们以将元素放置在该特定位置。请建议最简单的解决方案，因为我对 html 完全陌生，实际上最简单的 CSS 让我感到困惑。

编辑：

<div id="ParentContainer" style="height:100%; width:100%; overflow: hidden;"> 
    <div id="chart_div" style="float: left; width:50%; display:inline ;">Left</div>
    <div id="chart_div2" style="float: left; width:50%; display:inline ;">Random</div>
   </div>

我现在如何推荐他们？只是chart_div 还是类似ParentContainer.chart_div 的东西？

编辑 2：

 <div id="chart_div" style="float: left; width:50%; display:inline ;">Left</div>
    <div id="chart_div2" style="float: right; width:50%; display:inline ;">Random</div>

【问题讨论】：

“推荐他们”以什么方式？ CSS 还是 Javascript？
@LynelHudson：使用 javascript。我使用的方法 if getElementById(divId)

标签： html

【解决方案1】：

使用浮动来水平对齐 div 是使用 HTML 和 CSS 创建复杂布局的最简单方法之一。当浮动 div 时，您几乎应该始终对相关 div 应用宽度。这里有一个详细的例子：Three divs in one row and fourth in the second row

编辑：如果您询问如何在 javascript 中选择这些 div，一个简单的方法是分别使用 getElementById( 'chart_div' ) 和 getElementById( 'chart_div2' )。

【讨论】：

我正在使用 getElementById。我的意思是问，如果我使用嵌套的 div，我如何在这里使用他们的 Id？也只是内部 div 容器的 div id 吗？
即使 div 是嵌套的，您仍然可以使用getElementById。我还是不确定你在问什么？
只是想确认我是否可以这样做。谢谢
是的，没问题。 getElementById 可能是最常见的访问元素的方式，它不依赖于任何布局。

【解决方案2】：

尝试添加显示：内联

例如：

左侧菜单

你还有一个额外的；在第二个标签上。

【讨论】：

【解决方案3】：

如果是这样，您似乎想水平浮动 div

<div id="chart_div" style="float: left; width:50; ;">Left Side Menu</div>

更正内联样式width，别忘了修改父div的边距和内边距。设置 div chart_div Float Left 和 chart_div2 Float Right 然后你就会实现你想要的。使用引导程序的另一种选择，它可以让您更好地控制布局。

我正在向您发送我的代码，我能够浮动 div 正确复制我的代码并将其保存为 HTML，然后检查它。

<html><head><style type="text/css">#parent{width: 100%;height: 100%;overflow: hidden;background-color: red;}#child1{float: left;width: 50%;height: 50%;display: inline;background-color: blue;}#child2{float: left;width: 50%;height: 50%;display: inline;background-color: yellow;}</style></head><body><div id="parent"><div id="child1">child1</div><div id="child2">child2</div></div></body></html>

【讨论】：

能否请您检查edit2并确认这是否是您的意思？我仍然没有看到容器水平对齐。
Simran 检查我的代码，您将看到如何使用 HTML 和 CSS 实现您正在寻找的内容，而无需 javascript。如果您正确设置宽度，您可以继续水平添加任意数量的 div，例如 3 个浮动 div 的 100% / 3 = 33.33%，如果 4 个 div 的 100% / 4 = 25%，依此类推希望我的代码可以帮助你.