从旁边的图片移动表

时间：2017-08-30 14:46:03

标签： html css alignment element

我试图找到问题，但事实并非如此，因为它似乎有点复杂。

正如您在片段中看到的那样，第一个表格将div的权重与img一起声明，如果图像旁边的第二个表格的权重大于第一个表格，那么它就会向下移动。我想知道一个“干净”的解决方案，无论是使用浮动这样是错误的等等，因为我可以设置更大的第一个表的静态权重，这将解决整个问题。 （我刚刚将“专业：”改为“prof：”，因为它减少了表的重量并导致问题出现）

#gameContainer {
	margin-top: 20px;
}

#character {
	text-align: center;
	font-size: 18px;
}

#gameTitle {
	font-family: GameFont;
	font-size: 70px;
	margin-bottom: 50px;
	text-align: center;
}

#attributes td {
	padding-left: 10px;
}

#explore {
	margin-top: 45px;
	text-align: center;
}

.bttn:hover {
	cursor: pointer;
}

.bttn {
	box-shadow: 0.5px 0.5px 3px black;
	width: 24px;
}

#lvl {
	margin-top: 30px;
}
#start {
	margin-top: 45px;
}

#Log {
	text-align: center;
	margin-left: 5%;
	margin-right: 5%;
}

#point {
	margin-top: 45px;
	font-size: 21px;
	font-weight: bold;
}

#lvl {
	margin-bottom: 0px;
	font-size: 24px;
	font-weight: bold;
}

#exp {
	margin-bottom: 0px;
	margin-top: 10px;
	font-size: 16px;
}

#neededExp {
	margin-top: 5px;
	font-size: 16px;
}

#gold {
	margin-top: 30px;
	font-weight: bold;
}

#mainAttributes {
	text-align: left;
	font-weight: bold;
	font-size: 24px;
	padding-bottom: 45px;
}

#attributes{f
	text-align: left;
	font-size: 20px;
	display: inline-block;
}

.logEntries {
	display: none;
}

.choiceBtn {
	margin-left: 5%;
	margin-top: 3%;
}

.death {
	color: red;
	font-weight: bold;
}

.boldUp {
	font-weight: bold;
}

.optionMenuBtn {
	margin-left: 5%;
	margin-top: 3%;
}

#optionMenu {
	text-align: center;
	display: none;
}

.optionMenuBtn:nth-child(1) {
	margin-left: 0px;
}

#actionMenu {
	text-align: center;
}

.actionMenuBtn {
	margin-left: 5%;
}

.actionMenuBtn:nth-child(1) {
	margin-left: 0px;
}

.choiceBtn:nth-child(1) {
	margin-left: 0px;
}

.playerAttack {
	text-align:left;
}

.enemyAttack {
	text-align: right;
}

#battleLog {
	margin-left: 35%;
	margin-right: 35%;
	margin-top: 10%;
	text-align: center;
}

#battleLog h1 {
	font-size: 50px;
	margin-bottom: 10%;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div id="gameContainer">
		<h1 id="gameTitle">Your character</h1>
		<div id="character">
			<div id="attributes">
				<img src="https://i.pinimg.com/736x/51/0d/99/510d992e8ef64fe523a025208fbf8f5e--fantasy-images-elf.jpg" style="width: 260px; margin-right: 20px; box-shadow: 0px 0px 10px black; float: left;">	
				<table id="mainAttributes">
					<tr>
						<td>Name:</td>
						<td><span id="name"></span></td>
					</tr>
					<tr>
						<td>Race:</td>
						<td><span id="race"></span></td>
					</tr>
					<tr>
						<td>Prof:</td>
						<td><span id ="profession"></span></td>
					</tr>
				</table>
				<table>
					<tr>
						<td><span>Strength:</span></td>
						<td><span id="strength"></span></td>
					</tr>
					<tr>
						<td><span>Endurance:</span></td>
						<td><span id="endurance"></span></td>
					</tr>
					<tr>
						<td><span>Dexterity:</span></td>
						<td><span id="dexterity"></span></td>
					</tr>
					<tr>
						<td><span>Intelligence:</span></td>
						<td><span id="intelligence"></span></td>
					</tr>
					<tr>
						<td><span>Charism:</span></td>
						<td><span id="charism"></span></td>
					</tr>
				</table>
			</div>
</body>
</html>

4 个答案:

答案 0 :(得分：0)

我不知道你的情况与页面有什么关系，但是将“属性”宽度增加到500px或更多，并将表格向右浮动会起作用。由于这看起来很基本，我建议这个答案，但这不是我通常会推荐的。这是一种不好的做法，但确实有效。

我总是建议制作一个合适的基本样式表，或者使用像bootstrap这样的框架来帮助正确设计网站。

答案 1 :(得分：0)

抱歉，为什么要创建2个表？ 这个解决方案怎么样？

#gameContainer {
	margin-top: 20px;
}

#character {
	text-align: center;
	font-size: 18px;
}

#gameTitle {
	font-family: GameFont;
	font-size: 70px;
	margin-bottom: 50px;
	text-align: center;
}

#attributes td {
	padding-left: 10px;
}

#explore {
	margin-top: 45px;
	text-align: center;
}

.bttn:hover {
	cursor: pointer;
}

.bttn {
	box-shadow: 0.5px 0.5px 3px black;
	width: 24px;
}

#lvl {
	margin-top: 30px;
}
#start {
	margin-top: 45px;
}

#Log {
	text-align: center;
	margin-left: 5%;
	margin-right: 5%;
}

#point {
	margin-top: 45px;
	font-size: 21px;
	font-weight: bold;
}

#lvl {
	margin-bottom: 0px;
	font-size: 24px;
	font-weight: bold;
}

#exp {
	margin-bottom: 0px;
	margin-top: 10px;
	font-size: 16px;
}

#neededExp {
	margin-top: 5px;
	font-size: 16px;
}

#gold {
	margin-top: 30px;
	font-weight: bold;
}

#mainAttributes {
	text-align: left;
	font-weight: bold;
	font-size: 24px;
	padding-bottom: 45px;
}

#attributes{
	text-align: left;
	font-size: 20px;
	display: inline-block;
}

.logEntries {
	display: none;
}

.choiceBtn {
	margin-left: 5%;
	margin-top: 3%;
}

.death {
	color: red;
	font-weight: bold;
}

.boldUp {
	font-weight: bold;
}

.optionMenuBtn {
	margin-left: 5%;
	margin-top: 3%;
}

#optionMenu {
	text-align: center;
	display: none;
}

.optionMenuBtn:nth-child(1) {
	margin-left: 0px;
}

#actionMenu {
	text-align: center;
}

.actionMenuBtn {
	margin-left: 5%;
}

.actionMenuBtn:nth-child(1) {
	margin-left: 0px;
}

.choiceBtn:nth-child(1) {
	margin-left: 0px;
}

.playerAttack {
	text-align:left;
}

.enemyAttack {
	text-align: right;
}

#battleLog {
	margin-left: 35%;
	margin-right: 35%;
	margin-top: 10%;
	text-align: center;
}

#battleLog h1 {
	font-size: 50px;
	margin-bottom: 10%;
}
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div id="gameContainer">
		<h1 id="gameTitle">Your character</h1>
		<div id="character">
			<div id="attributes">
				<img src="https://i.pinimg.com/736x/51/0d/99/510d992e8ef64fe523a025208fbf8f5e--fantasy-images-elf.jpg" style="width: 260px; margin-right: 20px; box-shadow: 0px 0px 10px black; float: left;">	
				<table id="mainAttributes">
					<tr>
						<td>Name:</td>
						<td><span id="name">assssssssssssssss</span></td>
					</tr>
					<tr>
						<td>Race:</td>
						<td><span id="race">asdasdsaddsasad</span></td>
					</tr>
					<tr>
						<td>Profession:</td>
						<td><span id ="profession">aaaaaaaaaaaaaaaaaaaaaaaaa</span></td>
					</tr>
					<tr>
						<td><span>Strength:</span></td>
						<td><span id="strength">asdadsdasfsdgfshgdh</span></td>
					</tr>
					<tr>
						<td><span>Endurance:</span></td>
						<td><span id="endurance"></span></td>
					</tr>
					<tr>
						<td><span>Dexterity:</span></td>
						<td><span id="dexterity"></span></td>
					</tr>
					<tr>
						<td><span>Intelligence:</span></td>
						<td><span id="intelligence"></span></td>
					</tr>
					<tr>
						<td><span>Charism:</span></td>
						<td><span id="charism"></span></td>
					</tr>
				</table>
			</div>

仅使用1个表，无论如何我建议你使用display：flex。无论如何，在我的代码中只是重新调整该图像并且它可以正常工作

答案 2 :(得分：0)

我首先从display:inline-block;移除#attributes，然后从text-align:center;移除#character。这样您就可以使用表格的默认显示设置。没有额外的属性可以搞乱。

＆＃13;
＆＃13; 
#gameContainer {
	margin-top: 20px;
}

#character {
	font-size: 18px;
}

#gameTitle {
	font-family: GameFont;
	font-size: 70px;
	margin-bottom: 50px;
	text-align: center;
}

#attributes td {
	padding-left: 10px;
}

#explore {
	margin-top: 45px;
	text-align: center;
}

.bttn:hover {
	cursor: pointer;
}

.bttn {
	box-shadow: 0.5px 0.5px 3px black;
	width: 24px;
}

#lvl {
	margin-top: 30px;
}
#start {
	margin-top: 45px;
}

#Log {
	text-align: center;
	margin-left: 5%;
	margin-right: 5%;
}

#point {
	margin-top: 45px;
	font-size: 21px;
	font-weight: bold;
}

#lvl {
	margin-bottom: 0px;
	font-size: 24px;
	font-weight: bold;
}

#exp {
	margin-bottom: 0px;
	margin-top: 10px;
	font-size: 16px;
}

#neededExp {
	margin-top: 5px;
	font-size: 16px;
}

#gold {
	margin-top: 30px;
	font-weight: bold;
}

#mainAttributes {
	text-align: left;
	font-weight: bold;
	font-size: 24px;
	padding-bottom: 45px;
}

#attributes{
	text-align: left;
	font-size: 20px;
}

.logEntries {
	display: none;
}

.choiceBtn {
	margin-left: 5%;
	margin-top: 3%;
}

.death {
	color: red;
	font-weight: bold;
}

.boldUp {
	font-weight: bold;
}

.optionMenuBtn {
	margin-left: 5%;
	margin-top: 3%;
}

#optionMenu {
	text-align: center;
	display: none;
}

.optionMenuBtn:nth-child(1) {
	margin-left: 0px;
}

#actionMenu {
	text-align: center;
}

.actionMenuBtn {
	margin-left: 5%;
}

.actionMenuBtn:nth-child(1) {
	margin-left: 0px;
}

.choiceBtn:nth-child(1) {
	margin-left: 0px;
}

.playerAttack {
	text-align:left;
}

.enemyAttack {
	text-align: right;
}

#battleLog {
	margin-left: 35%;
	margin-right: 35%;
	margin-top: 10%;
	text-align: center;
}

#battleLog h1 {
	font-size: 50px;
	margin-bottom: 10%;
}
＆＃13; 
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div id="gameContainer">
		<h1 id="gameTitle">Your character</h1>
		<div id="character">
			<div id="attributes">
				<img src="https://i.pinimg.com/736x/51/0d/99/510d992e8ef64fe523a025208fbf8f5e--fantasy-images-elf.jpg" style="width: 260px; margin-right: 20px; box-shadow: 0px 0px 10px black; float: left;">	
				<table id="mainAttributes">
					<tr>
						<td>Name:</td>
						<td><span id="name">assssssssssssssss</span></td>
					</tr>
					<tr>
						<td>Race:</td>
						<td><span id="race">asdasdsaddsasad</span></td>
					</tr>
					<tr>
						<td>Profession:</td>
						<td><span id ="profession">aaaaaaaaaaaaaaaaaaaaaaaaa</span></td>
					</tr>
					<tr>
						<td><span>Strength:</span></td>
						<td><span id="strength">asdadsdasfsdgfshgdh</span></td>
					</tr>
					<tr>
						<td><span>Endurance:</span></td>
						<td><span id="endurance"></span></td>
					</tr>
					<tr>
						<td><span>Dexterity:</span></td>
						<td><span id="dexterity"></span></td>
					</tr>
					<tr>
						<td><span>Intelligence:</span></td>
						<td><span id="intelligence"></span></td>
					</tr>
					<tr>
						<td><span>Charism:</span></td>
						<td><span id="charism"></span></td>
					</tr>
				</table>
			</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

抱歉，为什么要创建2个表？ 这个解决方案怎么样？

＆＃13;
＆＃13; 
#gameContainer {
	margin-top: 20px;
}

#character {
	text-align: center;
	font-size: 18px;
}

#gameTitle {
	font-family: GameFont;
	font-size: 70px;
	margin-bottom: 50px;
	text-align: center;
}

#attributes td {
	padding-left: 10px;
}

#explore {
	margin-top: 45px;
	text-align: center;
}

.bttn:hover {
	cursor: pointer;
}

.bttn {
	box-shadow: 0.5px 0.5px 3px black;
	width: 24px;
}

#lvl {
	margin-top: 30px;
}
#start {
	margin-top: 45px;
}

#Log {
	text-align: center;
	margin-left: 5%;
	margin-right: 5%;
}

#point {
	margin-top: 45px;
	font-size: 21px;
	font-weight: bold;
}

#lvl {
	margin-bottom: 0px;
	font-size: 24px;
	font-weight: bold;
}

#exp {
	margin-bottom: 0px;
	margin-top: 10px;
	font-size: 16px;
}

#neededExp {
	margin-top: 5px;
	font-size: 16px;
}

#gold {
	margin-top: 30px;
	font-weight: bold;
}

#mainAttributes {
	text-align: left;
	font-weight: bold;
	font-size: 24px;
	padding-bottom: 45px;
  width:40%!important
}

#attributes{
	text-align: left;
	font-size: 20px;
	display: flex;
  flex-wrap: wrap;
}
img{
  display: block;
  max-height:500px;
  width: auto;
  height: auto;
  margin-right: 20px; 
  box-shadow: 0px 0px 10px black; float: left;
}
.logEntries {
	display: none;
}

.choiceBtn {
	margin-left: 5%;
	margin-top: 3%;
}

.death {
	color: red;
	font-weight: bold;
}

.boldUp {
	font-weight: bold;
}

.optionMenuBtn {
	margin-left: 5%;
	margin-top: 3%;
}

#optionMenu {
	text-align: center;
	display: none;
}

.optionMenuBtn:nth-child(1) {
	margin-left: 0px;
}

#actionMenu {
	text-align: center;
}

.actionMenuBtn {
	margin-left: 5%;
}

.actionMenuBtn:nth-child(1) {
	margin-left: 0px;
}

.choiceBtn:nth-child(1) {
	margin-left: 0px;
}

.playerAttack {
	text-align:left;
}

.enemyAttack {
	text-align: right;
}

#battleLog {
	margin-left: 35%;
	margin-right: 35%;
	margin-top: 10%;
	text-align: center;
}

#battleLog h1 {
	font-size: 50px;
	margin-bottom: 10%;
}
＆＃13; 
<div id="gameContainer">
		<h1 id="gameTitle">Your character</h1>
		<div id="character">
			<div id="attributes">
				<img src="https://i.pinimg.com/736x/51/0d/99/510d992e8ef64fe523a025208fbf8f5e--fantasy-images-elf.jpg">	
				<table id="mainAttributes">
					<tr>
						<td>Name:</td>
						<td><span id="name">assssssssssssssss</span></td>
					</tr>
					<tr>
						<td>Race:</td>
						<td><span id="race">asdasdsaddsasad</span></td>
					</tr>
					<tr>
						<td>Profession:</td>
						<td><span id ="profession">aaaaaaaaaaaaaaaaaaaaaaaaa</span></td>
					</tr>
					<tr>
						<td><span>Strength:</span></td>
						<td><span id="strength">asdadsdasfsdgfshgdh</span></td>
					</tr>
					<tr>
						<td><span>Endurance:</span></td>
						<td><span id="endurance"></span></td>
					</tr>
					<tr>
						<td><span>Dexterity:</span></td>
						<td><span id="dexterity"></span></td>
					</tr>
					<tr>
						<td><span>Intelligence:</span></td>
						<td><span id="intelligence"></span></td>
					</tr>
					<tr>
						<td><span>Charism:</span></td>
						<td><span id="charism"></span></td>
					</tr>
				</table>
			</div>
＆＃13;
＆＃13;
＆＃13;

仅使用1个表，无论如何我建议你使用display：flex。

相关问题
最新问题