html - 取id时如何套用css样式？

Question

我是 HTML 编码的新手，我有以下 HTML 元素:

<div id="map_canvas" style="width: 500px; height: 370px; border: 1px solid #ccc; float: left"></div>

我想为它申请一个“左”CSS 样式。我一直在为其他元素使用:

<div id="left" >
    <input type=button ....
</div>

但是，如您所见，map_canvas 已经是我的元素的 id，所以我如何应用 id left 的 CSS 元素> 为了它？

Answer 1

#map_canvas {
    width: 500px;
    height: 370px;
    border: 1px solid #ccc;
}

.left {
    float: left;
    border: 1px solid blue;
}

<div class="left">Not #map_canvas</div>
<div id="map_canvas" class="left">This is #map_canvas .left</div>

http://jsfiddle.net/94dwn/3/

请注意，如果“下一个”元素未被“清除”，则元素的宽度决定了它会 float 到下一个“行”，因此如果一个元素在显示上比之前的 floated 元素，它可以转到该元素的右侧/左侧。在这种情况下，您应该使用 clear。

<div class="left">Not #map_canvas</div>
<div id="map_canvas" class="left">This is #map_canvas .left</div>
<div class="cleared">Clear</div>

#map_canvas {
    width: 500px;
    height: 370px;
    border: 1px solid #ccc;
}
.left {
    float: left;
    border: 1px solid blue;
}
.cleared {
    clear: both;
    background: green;
    border: 1px solid blue;
    color: white;
}

http://jsfiddle.net/94dwn/4/