0

3つのdivを並べて配置しようとしていますが、部分的に機能していますが、画面の％に基づいて幅を設定しようとしていますが、すべてのdivの幅を合計すると100％になり、すべてに収まりません。 1行。下記を参照してください

これは私のモニターでどのように見えるかを示しています

これが私が使用している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>

すべてのサイズのモニターに収まるように、この作業を手伝ってください。

前もって感謝します。

4

1 に答える 1

2

合計ページ幅は100％です。最大で3つを最大33％にすることができます。ただし、3人のグループの左右にもある程度の余裕を持たせたいと思います。

<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の表示方法に影響を与える他のスタイルがある可能性があります。

これはそれがどのように見えるかです

于 2013-03-09T16:07:48.783 に答える