Question

我对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>

Answer 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' )。

Answer 2

尝试添加display：inline

例如：

左侧菜单

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

Answer 3

似乎你想要水平浮动div，如果是这样的话

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

更正内联样式宽度，不要忘记修改父div边距和填充。设置div chart_div 向左浮动和chart_div2 向右浮动然后你将实现你想要的。另一个使用bootstrap的选项可以让你很好地控制你的布局。

我正在向您发送我的代码，我可以将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>

将div容器水平放置在html中

3 个答案: