html - 内容溢出横幅

Question

我正在学习 HTML、CSS，但遇到了问题。我想显示横幅，但横幅的内容从横幅底部溢出。我的代码生成这个:

我希望它看起来像这样:

.

我的代码哪里有问题？

#banner4 {
  background-color: #e0e0e0;
  margin-left: 3.6%;
  border-left: solid;
  border-width: 7px;
  border-color: #0099FF;
  width: 92%;
  border-radius: 7px;
}
#banner4Tekst {
  padding: 30px;
  float: left;
}
#banner4Naslov {
  font-family: Times New Roman;
  font-size: 30px;
}
#banner4Podnaslov {
  font-family: Times New Roman;
  font-size: 17px;
}
#banner4BT {
  background-color: #0099FF;
  padding: 8px;
  border: none;
  border-radius: 4px;
  color: white;
  font-family: Cambria;
}
#banner4Button {
  margin-left: 55%;
  padding-top: 40px;
}

<div id="banner4">

  <div id="banner4Tekst">
    <p id="banner4Naslov">This is the fourth banner!</p>
    <p id="banner4Podnaslov">Why not try our services today, you won't regret your choice!</p>
  </div>

  <div id="banner4Button">
    <button id="banner4BT">CONTACT US TODAY</button>
  </div>

</div>

Answer 1

在您的 #banner4 中添加 float:left 或 display: inline-block 它将起作用。

#banner4 {

  display: inline-block;
  background-color: #e0e0e0;
  margin-left: 3.6%;
  border-left: solid;
  border-width: 7px;
  border-color: #0099FF;
  width: 92%;
  border-radius: 7px;
}

1) display: inline-block 表示:

Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

让我们举个例子来更好地理解。

<div id="div1"> contains many paras or divs inside it <div>
<div id="div2"> contains many paras or divs inside it </div>

现在两个 div 都有属性 display:inline-block，这意味着如果 width 它们将在同一行中对齐> 的浏览器允许它。否则 div2 将简单地移动到 div1 下面。

2) float 属性只是表示您希望容器 div 或 p 在屏幕上 float 的位置。

查看此答案以进一步了解float 和inline-block 的优缺点。 float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

3) clear:both 使元素下降到文档中位于它之前的任何 float 元素之下。

检查此答案以更好地理解它 What is the use of style="clear:both"?

编辑:

1) 我错了，div 会重叠。我已经删除了那个

2) 看完上面的答案后，我会说使用inline-block 比使用float 更好。我已经相应地编辑了答案