如何将文本放在div旁边？
如何将文本放在div旁边？
提问于 2018-08-23 17:37:33
我是一个学生网站开发者，需要一些帮助。我需要尽可能多地复制这个维基百科页面
我想把故事和下面的div放在适当的位置，就像在官方的wiki页面上一样。
另一种斗争是游戏"div"，我只是不能正确地把该死的文本放在那个盒子旁边。
对不起，我不知道你是否需要我所有的长-a*的代码，但我把它放在这里，我有一个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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-23 17:50:29
使用flex，它允许您在布局中具有更好的“灵活性”。
Html是如何声明的。如果您需要左边的元素，请在右边的元素之前声明它。
与其使用浮子，不如使用挠曲。
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>
Stack Overflow用户
发布于 2018-08-23 17:51:24
我会做这样的事
#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；来实现您想要的结果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51991418
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号