html - 无法对齐 div

Question

我正在尝试将 3 个 div 彼此相邻对齐，但我正在尝试根据屏幕的百分比设置宽度，但如果它使所有 div 的宽度加起来为 100%，则它不适合所有一条线。请看下面

这是我正在使用的html代码

<div style="width:100%;">
<div id='donate' class="hero-unit" style="width:20%; height:200px; margin-left:15px; Float:left">
<h1 style="font-size:35px;">Donate</h1>
<p>Interested in supporting us? Click below for more information</p>
<p>
<a class="btn btn-primary btn-large" link href="http://www.universalpvp.com">
Learn more &raquo;
</a>
</p>
</div>
<center>
<div id='forum' class="hero-unit" style="width:60%; height:200px; Float:left;">
<h1 style="font-size:35px;">Forum</h1>
<p>Want to talk to other members? Click below</p>
<p>
<a class="btn btn-primary btn-large" link href="http://www.universalpvp.com">
Learn more &raquo;
</a>
</p>
</div>
</center>
<div id='info' class="hero-unit" style="width:20%; height:200px; margin-right:15px; Float:right">
<h1 style="font-size:35px;">Server Information</h1>
<p>Click below for more information about the server</p>
<p>
<a class="btn btn-primary btn-large" href="http://www.universalpvp.com">
Learn more &raquo;
</a>
</p>
</div>
</div>

请帮我完成这项工作，使其适合所有尺寸的显示器。

提前致谢。

Answer 1

您的总页面宽度为 100%。最多，三者最多可以达到33%。但是，我看到您还希望他们在三人组的左侧和右侧有一些边距。

你甚至不需要父母<div>说width: 100%;

尝试这个：

<div id='donate' class="hero-unit" style="width:18%; height:200px; margin-left:2%; float:left">
<h1 style="font-size:35px;">Donate</h1>
<p>Interested in supporting us? Click below for more information</p>
<p>
<a class="btn btn-primary btn-large" link href="http://www.universalpvp.com">
Learn more &raquo;
</a>
</p>
</div>
<center>
<div id='forum' class="hero-unit" style="width:58% !important; height:200px; float:left;">
<h1 style="font-size:35px;">Forum</h1>
<p>Want to talk to other members? Click below</p>
<p>
<a class="btn btn-primary btn-large" link href="http://www.universalpvp.com">
Learn more &raquo;
</a>
</p>
</div>
</center>
<div id='info' class="hero-unit" style="width:18%; height:200px; margin-right:2%; float: left;">
<h1 style="font-size:35px;">Server Information</h1>
<p>Click below for more information about the server</p>
<p>
<a class="btn btn-primary btn-large" href="http://www.universalpvp.com">
Learn more &raquo;
</a>
</p>
</div>

您现在可以玩弄 % 值，但要确保它们不超过 100%（宽度和边距相结合）。如果它仍然不起作用，您可能有一些其他样式会影响<div>s 的显示方式。