html - 如何让一个 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>

这是它现在正在做的事情的照片:

“Perform... with new friends”需要在 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>