信息未显示为内联

Question

我试图将div并排放置，但它不起作用。一个是内联的，下一个是向下一点点，向右一点。

我的代码：

.FifteenInfo {
  display: inline;
  margin-top: 50px;
  height: auto;
  padding-right: 75px;
  float: left;
}
.FourtyInfo {
  display: inline;
  margin-top: 50px;
  height: auto;
  padding-right: 75px;
}
.SixtyInfo {
  display: inline;
  margin-top: 50px;
  height: auto;
  padding-right: 75px;
}
.Package {
  padding-left:70px;
  margin-top: 15px;
}
.monthlyPrice {
  padding-left:55px;
  font-size:52px;
  font-weight: bold;
  color: #277FD8;
}
.differentbandwidth {
  margin-left: 30px;
  display: inline;
  text-align: center;
  padding: 15px;
  border-style: solid;
  border-color: #277FD8;
  border-width: 3px;
  border-radius: 8px;
}
.border {
  border-left: thick solid #277FD8;
  display: inline;
  float: right;
}
.FifteenSpecs {
  display: inline;
  float: right;
}

    <div class="FifteenInfo">
      <h1 class="Package">Cable 15</h1>
      <h3 class="monthlyPrice">\$39.99</h3>
      <h3 class="differentbandwidth">\$69.99 Unlimited</h3>
      <div class="FifteenSpecs border">
        <h1>Cable 156666666666666666666666</h1>
        <h3>\$39.99</h3>
        <h3>\$69.99 Unlimited</h3>
      </div>
    </div>

以下是我对该问题的描述：

我完全迷失了，我尝试了内联，并且内联阻止显示时间，但它们无法正常工作。

然后，我观看了一些YouTube视频，以便在显示属性上刷新，但它不起作用。

Answer 1

您在评论中提到，您希望.FifteenSpecs.border旁边显示.FifteenInfo。

主要问题是，您的.FifteenSpecs内有.FifteenInfo div ，因此它会在内显示 {{ 1}}。只需将它移到外面，就像这样：

＆＃13;

＆＃13;

.FifteenInfo

＆＃13;

body, html {
  min-width: 1000px;
}

.FifteenInfo {
  display: inline-block;
  height: auto;
  background-color: green;
  vertical-align: top;
}
.monthlyPrice {
  font-size:52px;
  font-weight: bold;
  color: #277FD8;
}
.differentbandwidth {
  text-align: center;
  border-style: solid;
  border-color: #277FD8;
  border-width: 3px;
  border-radius: 8px;
}
.FifteenSpecs {
  display: inline-block;
  background-color: red;
  vertical-align: top;
}

＆＃13;

＆＃13;

＆＃13;

我在代码中更改了其他一些内容：

• 将<div class="FifteenInfo"> <h1 class="Package">Cable 15</h1> <h3 class="monthlyPrice">\$39.99</h3> <h3 class="differentbandwidth">\$69.99 Unlimited</h3> </div> <div class="FifteenSpecs border"> <h1>Cable 156666666666666666666666</h1> <h3>\$39.99</h3> <h3>\$69.99 Unlimited</h3> </div>更改为inline，以便保留框模型
• 删除了所有inline-block，padding：这真的很混乱
• 已删除margin：float已经使其成为＆＃34; float＆＃34;左侧。
• 添加inline-block以使div的顶部对齐（而不是底部）