时间戳

首页 > 解决方案 > 如何将 ap 标签放在两个 div 下？

html - 如何将 ap 标签放在两个 div 下？

问题描述

所以我有两个相邻的 div，通过左 div 向左浮动和右 div 向右浮动。我希望我的 p 出现在这两个 div 下面。然而，它只是拒绝这样做。它总是出现在页面顶部或两个 div 之间。我已经尝试将两个 div 设置为显示内联块，但是它们不会彼此相邻，而是进行换行。我对 HTML 和 CSS 比较陌生，所以这可能只是一个简单的初学者错误，但如果有人能帮助我，我将不胜感激。

.p {
  background: red;
  width: 100%;
}

.tippsboxright {
  color: rgb(238, 238, 238);
  max-width: 45%;
  margin: 0 0 0 5%;
  float: right;
  font-size: 1.7vw;
  padding: 0;
}

.boxleft {
  max-width: 50%;
}
<main>
  <header>
    <h1>My header</h1>
  </header>
  <div class="content">
    <div class="boxleft">
      <img src="../images/questionguy.png" alt="Typ mit fragen" class="imgkauftipps">
    </div>
    <div class="tippsboxright">
      <p>
        This is the right box with text inside of it.
      </p>
    </div>
    <p class="p">This is the p tag that I want to be at the bottom of the page.</p>
  </div>
</main>

标签： htmlcss

解决方案

您需要为此使用 CSS flexbox 而不是 float。将顶部 div 放入 wrapper/container 并提供 wrapper display: flex。基本上就是这样，但你可以像我在这个例子中所做的那样巧妙地处理它：

.wrap {
  display: flex;
  justify-content: space-between;
}

.wrap div {
  width: 100%;
  outline: 1px solid red;
 }
<div class="wrap">
  <div>left</div>
  <div>right</div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Me non paenitet nullum festiviorem excogitasse ad hoc. Quis aute iure reprehenderit in voluptate velit esse. Quam temere in vitiis, legem sancimus haerentia. Inmensae subtilitatis, obscuris et malesuada fames. Fictum, deserunt mollit anim laborum astutumque!</p>

或者，使用您示例中的 html，除非我已将<p>标签移出包装器。是否<p> 必须在包装器div中？

.content {
  display: flex;
}
<main>
  <header>
    <h1>My header</h1>
  </header>
  <div class="content">
    <div class="boxleft">
      <img src="../images/questionguy.png" alt="Typ mit fragen" class="imgkauftipps">
    </div>
    <div class="tippsboxright">
      <p>
        This is the right box with text inside of it.
      </p>
    </div>
    
  </div>
  <p class="p">This is the p tag that I want to be at the bottom of the page.</p>
</main>

推荐阅读