如何使一个div出现在另一个div内而不是在其下方？

Question

我创建了一个不错的div，其中需要有两个div：一个用于照片，一个用于文本。该照片很好地显示在父div内，但文本显示在父div的下方，即使在我的HTML代码中它也安全地藏在父div中。

如何使该文本显示在照片右侧的父div内？

代码：

body {
    padding-top: 48px;
    height: 100%;
    width: 100%;
}

#main-container {
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: #f7f7f7;
    padding-bottom: 120px;
}

#photo-box1 {
    background-color: red;
    height: 100%;
    background-image: url('/static/images/welcome1_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box2 {
    background-color: red;
    height: 100%;
    background-image: url('/static/images/welcome2_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box3 {
    background-color: red;
    height: 100%;
    background-image: url('/static/images/welcome3_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#info-box {
    display: inline-block;
    width: 90%;
    height: 33%;
    background-color: #f8f8ff;
    margin: 15px;
    border-radius: 2px;
    box-shadow: 3px 3px 3px grey;
    border: 1px black;
}

<div class="container-fluid" id="main-container">
    <div id="info-box">
        <div class="col-md-4" id="photo-box1"></div>
        <div class="col-md-8" id="text-box">
            <h2>Perform... with new friends.</h2>
            <p class="lead"><a class="btn btn-info btn-lg btn-md" href="{% url 'public:about' %}" role="button">ABOUT US</a></p>
        </div>
    </div>
</div>

这是现在正在做的照片：

“与新朋友一起表演...”必须位于div中，照片旁边。

谢谢。

我现在意识到我必须使用容器的Bootstrap系统->行->列。但是，当我在各列之前添加一行时，该文本现在会根据需要显示在div内，但照片实际上消失了，或者被折叠了。

当前代码：

body {
    padding-top: 48px;
    height: 100%;
    width: 100%;
}

#main-container {
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: #f7f7f7;
    padding-bottom: 15%;
}

#info-box {
    display: inline-block;
    width: 90%;
    height: 33%;
    background-color: #f8f8ff;
    margin: 15px;
    border-radius: 2px;
    box-shadow: 3px 3px 3px grey;
    border: 1px black;
}

#photo-box1 {
    height: 100%;
    background-image: url('/static/images/welcome1_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box2 {
    height: 100%;
    background-image: url('/static/images/welcome2_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box3 {
    height: 100%;
    background-image: url('/static/images/welcome3_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

<div class="container-fluid" id="main-container">
    <div id="info-box">
        <div class="row">
            <div class="col-md-4" id="photo-box1"></div>
            <div class="col-md-8" id="text-box">
                <h2>Perform... with new friends.</h2>
                <p class="lead"><a class="btn btn-info btn-lg btn-md" href="{% url 'public:about' %}" role="button">ABOUT US</a></p>
            </div>
        </div>
    </div>
</div>

请帮我找回我的照片！

Answer 1

您应该将photo-box1的列和文本框都放在行列中

<div class="row">
  <div class="col-md-4" id="photo-box1"></div>
  <div class="col-md-8" id="text-box">
    <h2>Perform... with new friends.</h2>
    <p class="lead"><a class="btn btn-info btn-lg btn-md" href="{% url 
    'public:about' %}" role="button">ABOUT US</a></p>
  </div>
</div>

谢谢大家对行和行高度的回答。但是，现在图片从左侧的div溢出。我如何使其完全保留在其父div内？

代码：

body {
    padding-top: 48px;
    height: 100%;
    width: 100%;
}

#main-container {
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: #f7f7f7;
    padding-bottom: 15%;
}

#info-box {
    display: inline-block;
    width: 90%;
    height: 33%;
    background-color: #f8f8ff;
    margin: 15px;
    border-radius: 2px;
    box-shadow: 3px 3px 3px grey;
    border: 1px black;
}

#photo-box1 {
    height: 100%;
    background-image: url('/static/images/welcome1_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box2 {
    height: 100%;
    background-image: url('/static/images/welcome2_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#photo-box3 {
    height: 100%;
    background-image: url('/static/images/welcome3_md.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#card {
    height: 100%;
}

<div class="container-fluid" id="main-container">
    <div id="info-box">
        <div class="row" id="card">
            <div class="col-md-4" id="photo-box1"></div>
            <div class="col-md-8" id="text-box">
                <h2>Perform... with new friends.</h2>
                <p class="lead"><a class="btn btn-info btn-lg btn-md" href="{% url 'public:about' %}" role="button">ABOUT US</a></p>
            </div>
        </div>
    </div>
</div>