css - 在 div 元素上对齐文本

Question

我希望 2012 年在第一张地图的左侧（几乎在它所在的位置），而 2010 年在第二张地图的左侧。我无法发布屏幕截图，因为我是新用户，但它们位于页面的左侧和右侧。

这是我的代码：

<b>2012<b>
<div id="map_canvas2" style="width:25%; height:25%"></div>
<b>2010<b>
<div id="map_canvas" style="width:25%; height:25%"></div>

搜索后我看到你必须用 CSS 来做，但是怎么做呢？我觉得如果我在 CSS 中将某些内容设置为向左，则所有文本都向左。

提前致谢！

Answer 1

我认为你应该这样编码： -

HTML

<div id="map_canvas"><b>2012<b></div>
<div id="map_canvas2"><b>2010<b></div>

CSS

#map_canvas {
float:left;
background:red;
width:300px;
height:200px;
}

#map_canvas2 {
float:right;
background:green;
width:300px;
height:200px;
}

看演示：- http://jsfiddle.net/3XBNa/1/

Answer 2

把它放在css代码中。

<style type="text/css">
   b,div{float:left;}
   .cls{clear:both;}
</style>

HTML 代码：

<b>2012</b>
<div id="map_canvas2" style="width:25%; height:25%">div 1</div>
    <br class="cls"/>
<b>2010</b>
    <div id="map_canvas" style="width:25%; height:25%"> div 2</div>    <br class="cls"/>
​

这应该这样做。