Question

如何将两个div与许多子div放在一起？我希望红色部分适合蓝色部分。

enter image description here

注意：名字和姓氏都是假的，所以这并不重要。

我的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'] ."&nbsp". $row['last_name'] ."&nbsp;". "(".$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规则或一些规则，但我似乎无法做到正确。此外，当它旁边 - 它需要自动扩展高度与蓝色部分（包括按钮）相同。

Answer 1

您可以通过display: table

实现此目标

这是一个有效的演示 - http://jsbin.com/povajidesa/1/edit?html,output

我改变了什么：

将display: table添加到#AccountFrame规则集
将display: table-cell添加到#AccountAvatar和#AccountInfo规则集
将vertical-align: top添加到#AccountInfo规则集以垂直对齐文本，可以根据需要进行更改。

Answer 2

您需要使用float:left;和#AccountAvatar的{{1}}样式属性。同时将#AccountInfo的{{1}}设置为width（剩余宽度）。

重新设置#AccountInfo和70%的css样式，如下所示：

#AccountAvatar

这是 demo 。

CSS：不能将两个div放在一起

2 个答案: