Question

我正在学习HTML，CSS和我有问题。我想要显示横幅，但横幅的内容溢出横幅的底部。我的代码生成了这个：

http://oi60.tinypic.com/zldlw4.jpg

我希望它看起来像这样：

http://oi60.tinypic.com/169gdhw.jpg。

我的代码中的问题在哪里？

#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>

现在两个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;
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

内容溢出横幅

3 个答案: