无法对齐 <div> 标签答案

【问题标题】：Can't align <div> tags无法对齐 <div> 标签
【发布时间】：2012-11-10 23:57:37
【问题描述】：

我在对齐<div> 标签时遇到了几个问题，如here 所示。布局是这样的：我有一个容器页眉，里面有一个页眉、一个页脚，在它们之间有两个左右 div。我的问题是右侧和页脚，即使它们是从<body> 标记继承的，也没有与中心对齐。

另外，由于某种原因，页面可以向右滚动一点，而那一小部分的背景没有着色。

这是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rock-paper-scissers</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="rps.js"></script>
<style type="text/css">
body{
    width: 100%;
    font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93e1d1), to(#d4c87c));
    background-image: -webkit-linear-gradient(left, #93e1d1, #d4c87c); 
    background-image: -moz-linear-gradient(top, #93e1d1, #d4c87c);
    background-repeat: no-repeat;
}
div#footer {
    width: 100%;
}
div#container {
    text-align: center;
}
div.InnerLeft {
    width: 50%;
    position: relative;
    float: left;
}
div.InnerRight {
    width: 50%;
    position: relative;
    float: right;
}
select {
    background: transparent;
    width: 220px;
    padding: 5px;
    font-size: 16px;
    border: 0px;
    height: 34px;
}
img#andale {
    margin-left: auto;
    margin-right: auto;
    margin-left: 100px;
}
</style>
</head>
<body>
<div id="container">
<img src="header.png">
<div class="InnerLeft">
<img src="uno.png"><br>
<select id="p1" onchange="change('p1','rpsleft')">
<option value=0>Choose your weapon</option>
<option value=1>Rock</option>
<option value=2>Paper</option>
<option value=3>Scissors</option>
</select>
<p><img src="rpsL.png" id="rpsleft"></p>
</div>
<div class="InnerRight">
<img src="dos.png"><br>
<select id="p2" style="margin-left:45%;" onchange="change('p2','rpsright')">
<option value=0>Choose your weapon</option>
<option value=1>Rock</option>
<option value=2>Paper</option>
<option value=3>Scissors</option>
</select>
<p><img src="rps.png" id="rpsright" style="margin-left:45%;"></p>
</div>
<div id="footer">
<img src="andale.png" id="andale" onclick="rps(document.getElementById('p1').value,document.getElementById('p2').value)"
onMouseOver="document.getElementById('andale').src='andale2.png'"
onMouseOut="document.getElementById('andale').src='andale.png'">
</div>
</div>
</body>

有什么办法可以解决这两个小问题吗？

谢谢！

附：我厌倦了将图像源设置到我的保管箱和谷歌驱动器帐户，以便可以在 jsFiddle 上看到它们，但它不起作用。关于我可以使用哪个网站的任何建议？

【问题讨论】：

jsFiddle 的body 部分仅获取您的<body> 标签的内容。标题中的资源由左侧的Add Resources 添加。包括图片在内的外部链接必须是包含域名的完整 URL。 jsfiddle.net/cr8s8/22
另外，为了让您的问题对其他人有用，请在链接失效后将相关代码放在帖子本身中。
Dropbox 的链接不起作用。你知道我可以用什么吗？
您需要 Google “免费图片托管” 并使用他们提供的直接 URL。
为了测试目的，你也可以使用 placehold.it。

标签： css html alignment center

【解决方案1】：

好吧，还有一些小事……

（示例：http://jsfiddle.net/mori57/cr8s8/29/）

<!-- for one, without a specified width and height
     the browser doesn't know how to flow the other elements
     around this object ... I used placehold.it to show you what
     happens if you put in an object with actual dimensions -->
<img src="http://www.placehold.it/400x50">

如果没有指定尺寸的图片，由于浏览器无法加载图片，浏览器默认为一个很小的图片，第一个float包裹在它前面，按照float:left的要求。

您/也可以/将这些浮动包装在一个容器中，并强制将其清除：both，以避免浮动在您的标题图像前面。

其次：

    <!-- Your extra space was due to the margin-left you shimmed onto 
         this select tag. If you take it out, the extra horiz
         scrolling goes away -->
    <select id="p2" onchange="change('p2','rpsright')">

请记住，有边距的对象 /inside/ 另一个容器 /can/ “戳穿”容器的边界。因此，它在其容器的边缘添加了它的边缘，并将自己推过其容器的“墙”，从而增加了所需的水平空间。

【讨论】：