内容溢出横幅

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 和 inline-block 的优点和缺点。 float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

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

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

编辑：

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

2) 看了上面的回答，我觉得用inline-block比用float好。我已经相应地编辑了答案

Answer 2

这是一个JSFiddle

它在小屏幕上并不完美，因为您的按钮文本分两行。如果我需要更改我的代码，请告诉我。

HTML:

<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 class="clear"></div>
</div>

CSS:

#banner4{
    background-color:#e0e0e0;
    margin-left:3.6%;
    border-left: solid;
    border-width:7px;
    border-color:#0099FF;
    width:92%;
}

#banner4Tekst{
    float:left;
    width:66%;
    padding: 10px 2%;
}

#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{
    float:left;
    width:30%;
}
#banner4Button button{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 30px;
    font-size: 24px;
}
p{
    margin: 10px;
}
.clear{
    clear:both;
    width:100%
}

Answer 3

问题是您使用的是浮动。带有浮动的元素没有高度。当您的横幅包含所有非浮动元素（仅按钮）时，它就会停止。您可以做的是在使用 clear: both;.

强制在所有左右浮动的元素下方的所有浮动元素之后添加一个元素

<div class="clearboth"></div>

.clearboth {
  clear: both;
}

#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 {
  float: left;
  padding-left: 60px;
  padding-top: 90px;
}
.clearboth {
  clear: both;
}

<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 class="clearboth"></div>

</div>

内容溢出横幅

Content spilling out of banner

html

css

background

position