不能让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>的显示方式。