内容溢出横幅

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表示：

将元素显示为内联级块容器。这个块的内部被格式化为块级框，元素本身被格式化为行内级框

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

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

现在divs 都具有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>