CSS：不能将两个div放在一起 [英] CSS: Can't place two divs beside each other
问题描述
如何放置两个div和许多儿童div在彼此旁边？
我想要红色部分正确到蓝色部分。
How can I place two divs with lots of child divs beside each other? I want red part to be right to Blue part.
注意：姓名和姓是假的，因此无所谓。
Note: Name and surname are fake, so that doesn't matter.
我的HTML：
<body>
<div id="MainBody">
<div id="DataFrame">
<div class="DataObjects"><div class="InfoLabels">Account Level:</div><div class="InfoData" id="LevelData"><?php echo($row['level']); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Profile Views:</div><div class="InfoData" id="ProfileData"><?php echo(mysqli_num_rows($views)); ?></div></div>
<div class="DataObjects"><div class="InfoLabels">Messages:</div><div class="InfoData" id="MessageData">0</div></div>
</div>
<div id="AccountFrame">
<div id="AccountAvatar">
<img src="http://upload.wikimedia.org/wikipedia/commons/c/cd/Placeholder_male_superhero_c.png" id="Acc_img"/>
<input type="button" id="sendPm" value="Send Message" name="sendPm"/>
</div>
<div id="AccountInfo">
<div id="NameObject" class="DetailObjects"><div class="DetailLabel"><?php echo($row['first_name'] ." ". $row['last_name'] ." ". "(".$row['username'].")");?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Age: </div><div class="DetailInput" id="DetailAge"><?php echo($age); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Country: </div><div class="DetailInput" id="DetailCountry"><?php echo($row['country']); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">Registered: </div><div class="DetailInput" id="DetailReg"><?php echo($timeon." Days Ago"); ?></div></div>
<div class="DetailObjects"><div class="DetailLabel">About Me: </div><div class="DetailInput" id="DetailAbout"><?php echo($row['about']);?></div></div>
</div>
</div>
</div>
</body>
我的CSS：
*{
margin: 0px;
padding: 0px;
font-family: 'Ubuntu', sans-serif;
}
body{
background-color: #111111;
margin: 1%;
}
#MainBody{
width: 60%;
margin-left: auto;
margin-right: auto;
height: 800px;
}
#AccountFrame{
width: 100%;
padding: 15px;
height: 100%;
background-color: #eeeeee;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
display: inline-block;
}
#DataFrame{
font-size: 2.0vh;
padding: 15px;
background-color: #eeeeee;
border-radius-top: 4px;
width: 100%;
text-align: right;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
#DataFrame ,.InfoLabels, .InfoData{
display: inline-block;
}
#AccountAvatar{
background-color: blue;
width: 30%;
}
#AccountAvatar img{
width: 100%;
}
#sendPm{
width: 100%;
height: 5.0vh;
background-color: #0071ff;
border: 0px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #1A1A1A;
font-size: 2.0vh;
}
#sendPm:hover{
background-color: #308CFF;
}
.DetailLabel{
display: inline-block;
width: 9.0vh;
}
.DetailInput{
width: 40%;
display: inline;
}
.DetailObjects{
width: 100%;
display: inline-block;
background-color: red;
margin-top: 1.0vh;
}
#AccountName{
color: #0071ff;
}
#AccountInfo{
width: 100%;
font-size: 1.7vh;
}
我确定它是一些简单的CSS规则或几个规则， t似乎得到它的权利。
I am sure it's some simple CSS rule or few rules but I just can't seem to get it right. Also when beside it - it needs to automatically spread in height same as blue part (including button).
推荐答案
您需要使用 #AccountAvatar 和 #AccountInfo float：left; c>。将 #AccountInfo 的 width 设置为 70％剩余宽度）。
You need to use the float:left; styling property for #AccountAvatar and #AccountInfo. Also set the width of #AccountInfo to 70% (remaining width).
重新为您的css更改 #AccountAvatar 和 #AccountInfo 如下：
Re-style your css for #AccountAvatar and #AccountInfo as follows:
#AccountAvatar{
background-color: blue;
width: 30%;
float:left;
}
#AccountInfo{
width: 70%;
font-size: 1.7vh;
float:left;
}
这里是 demo 。
Here's a demo.
这篇关于CSS：不能将两个div放在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
