我是一名学生Web开发人员，需要一些帮助。 我需要尽可能地复制此wikipedia page
我想将Story和divs放在适当的位置，例如在官方Wiki页面上。
另一个难题是游戏性“ div”，我只是不能将那该死的文字正确地放在那个盒子旁边。
对不起，我不知道您是否需要我的完整long-a * s代码，但我将其放在此处，我有一个jsbin链接，但我无法看到它。
}
body {
background-color: #FFFFFF;
border: 1px solid #A7D7F9;
padding: 5px;
width: auto;
}
h1 h2 {
font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
font-style: italic;
font-weight: normal;
}
h1 {
border-bottom: 0.063em solid grey;
padding-bottom: 0.313em;
font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
}
.contents {
border: 0.063em solid #A2A9B1;
width: 9.063em;
float: left;
background-color: #F8F9FA;
}
p {
font-family: sans-serif;
}
h4 {
text-align: center;
}
.info {
border: 0.063em solid #A2A9B1;
width: 18.125em;
text-align: center;
line-height: 1.5em;
direction: ltr;
display: table;
float: right;
clear: all;
background-color: #F8F9FA;
}
table {
font-family: sans-serif;
}
figcaption {
text-align: center;
font-family: sans-serif;
font-size: 95%;
}
h2 {
border-bottom: 0.063em solid grey;
padding-bottom: 0.313em;
}
a {
font-family: sans-serif;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
th,
td {
text-align: left;
font-size: 90%;
padding-left: 5px;
}
.edit {
font-size: 60%;
font-weight: normal;
}
.text {
text-align: justify;
}
.story {
display: block;
clear: both;
}
.gameplay-info {
border: 0.063em solid #A2A9B1;
width: 188px;
height: 198px;
font-size: 13px;
padding: 3px;
padding-right: 5px;
background-color: #F8F9FA;
display: inline-block;
}
.center {
width: 180px;
height: 120px;
}
.gameplay {
text-align: justify;
}
.infobar {
border: 1px solid #A2A9B1;
margin: 5px;
padding: 5px;
background-color: #F6F6F6;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Wiki site</title>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/linux-libertine" type="text/css" />
</head>
<body>
<div class="container">
<div class="about">
<h1>Communist Mutants from Space</h1>
<small>From Wikipedia, the free encyclopedia</small>
<p><strong>Communist Mutants from Space </strong>is a <a href="/wiki/Fixed_shooter">fixed shooter</a> video game programmed by Stephen H. Landrum for the <a href="/wiki/Atari_2600">Atari 2600</a> with the <a href="/wiki/Starpath_Supercharger">Starpath Supercharger</a> cassette accessory. It was published in 1982 by <a href="/wiki/Starpath">Starpath</a> (formerly Arcadia).<sup><a href="#">[2]</a></sup> The game is a variant of <a href="/wiki/Galaxian">Galaxian</a>.<sup><a href="#">[3]</a></sup>
</p>
<div class="info">
<h3>Communist Mutants from Space</h3>
<img src="https://upload.wikimedia.org/wikipedia/en/8/85/Communist_Mutants_from_Space_cover.jpg">
<figcaption>Cover art</figcaption>
<table>
<tr>
<th><a href="/wiki/Video_game_developer">Developer(s)</a>
</th>
<td><a href="/wiki/Starpath">Starpath</a>
</td>
</tr>
<tr>
<th><a href="/wiki/Video_game_programmer">Programmer(s)</a>
</th>
<td>Stephen H. Landrum<sup><a href="#">[1]</a></sup>
</td>
</tr>
<tr>
<th><a href="/wiki/Computing_platform">Platform(s)</a>
</th>
<td><a href="/wiki/Atari_2600">Atari 2600</a>
</td>
</tr>
<tr>
<th>Release</th>
<td><a href="/wiki/North_America">NA:</a>1982</td>
</tr>
<tr>
<th><a href="/wiki/Vodeo_game_genre">Genre(s)</a>
</th>
<td><a href="/wiki/Fixed_shooter">Fixed shooter</a>
</td>
</tr>
<tr>
<th>Mode(s)</th>
<td><a href="/wiki/Single-player_video_game">Single-player</a>
</td>
</tr>
</table>
</div>
<div class="contents">
<h4>Contents <span class="edit">[<a href="#">hide</a>]</span></h4>
<ol>
<li><a href="#story">Story</a>
<li><a href="#gameplay">Gameplay</a>
<ol>
<li><a href="#game-menu">Game menu</a>
</li>
</ol>
</li>
<li><a href="#easteregg">Easter Egg</a>
<li><a href="#references">References</a>
<li><a href="#external-links">External Links</a>
</ol>
</div>
</div>
<div class="story">
<h2> Story <span class="edit">[<a href="#">edit</a>]</span></h2>
<p>Aliens from the <a href="/wiki/Communism">communist</a> planet of Rooskee are invading peaceful, democratic planets and turning their inhabitants into "Communist Mutants." The communist mutant armies are controlled by the Mother Creature, a strange
alien who has gone mad due to irradiated <a href="/wiki/Vodka">vodka</a>.</p>
</div>
<div class="gameplay">
<h2>Gameplay<span class="edit">[<a href="#">edit</a>]</span></h2> <span class="text">The player starts off with three reserve cannons. The object is to destroy the mutants aliens and, most importantly, the Mother Creature. The mutants hatch from moving eggs at the top of the screen. Because the Mother Creature replenishes eggs
when they hatch or are destroyed, it must be defeated before the player can advance to the next wave. If a mutant or a bomb thrown by a mutant comes into contact with the cannon, the cannon will be destroyed and a reserve must be called up. A new
cannon is awarded on every other wave.</span>
<span class="gameplay-info">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/f2/Commiemutants.png/180px-Commiemutants.png">
The player must destroy the Mother Creature without being destroyed by the mutants and their bombs.</span>
<h3>Game menu <span class="edit">[<a href="#">edit</a>]</span></h3>
<p>The menu allows a variety of gameplay changes; for example, the player may toggle the shield option on or off. If activated, "shield" mode allowed a player to press down on the joystick to become invincible for a short period (only one shield was
allotted per level). Another feature was the "time warp," which allowed the player to press up on the joystick to temporarily slow down the passage of time for his opponents (i.e., they move slower than usual). Additionally, the type of shot fired
could be changed by activating the "penetrating fire" option (which enhanced the beam fired so that it could withstand hitting two mutants rather than a single one) and/or the "guided fire" option (which caused the beam to be moved with the joystick
rather than firing in a straight line). The menu also allowed for multiple players (up to four) to be entered into the game. Players one and three shared the first joystick while players two and four shared the second.</p>
</div>
<div class="easter-egg">
<h2> Easter Egg <span class="edit">[<a href="#">edit</a>]</span></h2>
<p>Holding fire during power-on of the Atari 2600 causes the "HI" on the high scores screen to change to "SHL", the initials of programmer Stephen H. Landrum. <sup><a href="#">[4]</a></sup>
<p>
</div>
<div class="references">
<h2>References <span class="edit">[<a href="#">edit</a>]</span></h2>
<ol>
<li><b><a href="#">^</a></b> Hague James
<a rel="nofollow" class="external text" href="http://dadgum.com/giantlist/">"The Giant List of Classic Game Programmers"</a>
</li>
<li><b><a href="#">^</a></b>
<a rel="nofollow" class="external text" href="https://books.google.com.au/books?id=yy8EAAAAMBAJ&lpg=PA26&dq=Supercharger%20starpath&pg=PA26#v=onepage&q=Supercharger%20starpath&f=false">I break for Arcadians:Entertainment abounds in a gaggle of games</a>,
Page 26, InfoWorld, 27 Jun 1983,</li>
<li><b><a href="#">^</a></b> Brundage, Darryl (June 23, 2005). <a rel="nofollow" class="external text" href="http://ataritimes.com/index.php?ArticleIDX=475">"Communist Mutants from Space"</a>. The Atari Times.</li>
<li><b><a href="#">^</a></b> Federico, Chris. <a rel="nofollow" class="external text" href="http://www.geocities.com/SiliconValley/Server/2990/ocgs/issue8/eggstron.html">"The Complete 2600 Easter Egg Archive"</a>. Orphaned Computers & Game Systems.
Retrieved 2007-12-28.
<sup><a href="#">[dead link]</a></sup>
</li>
</ol>
</div>
<div class="external-links">
<h2>External links <span class="edit">[<a href="#">edit</a>]</span></h2>
<ul class="b">
<li><a href="http://www.atarimania.com/game-atari-2600-vcs-communist-mutants-from-space_13667.html"><i>Communnist Mutants from Space</i></a> at Atari Mania</li>
<li><a href="https://en.wikipedia.org/wiki/AtariAge"><i>Communnist Mutants from Space</i></a> at AtariAge</li>
</ul>
<div class="infobar">
<a href="#">Categories: </a> |
<a href="#">1982 video games</a> |
<a href="#">Atari 2600 games</a> |
<a href="#">Atari 2600-only games</a> |
<a href="#">Cold War video games</a> |
<a href="#">Fixed shooters</a> |
<a href="#">North America-exclusive video games</a> |
<a href="#">Starpath games</a> |
<a href="#">Video games developed in the United States</a> |
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
使用flex，它可以使您在布局中拥有更好的“灵活性”。
HTML被解释为如何声明的。如果需要左侧的元素，请在右侧的元素之前声明。
使用flex比使用float更有用。
https://jsfiddle.net/jfq4x07c/3/
body {
background-color: #FFFFFF;
border: 1px solid #A7D7F9;
padding: 5px;
width: auto;
}
.text {
text-align: justify;
}
.gameplay-info {
border: 0.063em solid #A2A9B1;
width: 188px;
height: 198px;
font-size: 13px;
padding: 3px;
padding-right: 5px;
background-color: #F8F9FA;
display: inline-block;
}
.gameplay-container {
display:flex;
}
.gameplay {
text-align: justify;
}<span class="gameplay-container">
<span class="gameplay-info">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/f2/Commiemutants.png/180px-Commiemutants.png"> The player must destroy the Mother Creature without being destroyed by the mutants and their bombs.</span>
<span class="text">The player starts off with three reserve cannons. The object is to destroy the mutants aliens and, most importantly,
the Mother Creature. The mutants hatch from moving eggs at the top of the screen. Because the Mother Creature
replenishes eggs when they hatch or are destroyed, it must be defeated before the player can advance to the
next wave. If a mutant or a bomb thrown by a mutant comes into contact with the cannon, the cannon will be
destroyed and a reserve must be called up. A new cannon is awarded on every other wave.</span>
</span>
答案 1 :(得分：0)
我会做这样的事情
#story{
width: 80%;
}
#smallbox{
width: 150px;
height: 125px;
background: #FFFF00;
}
#largebox{
width: calc(100% - 150px);
height: 150px;
background: #00FF00;
}
#smallbox, #largebox{
float: left;
}<div id="story">
<div id="smallbox">
<p>Img + text</p>
</div>
<div id="largebox">
<p>Text</p>
</div>
</div>
更新
请注意，高度和宽度应设置为自动，以便根据内容进行调整。我只是给它一个值，以便您可以看到这些框。重要的是您可以使用float：left;。实现您想要的。