如何在CSS中使用内联块子项创建块容器

Question

我有这个问题：

这是维持关系层次亲子关系的格式。

<div class="ContainerTitle">SYLLABUS:
<div class="DownloadThis"></div>
<div class="ViewThis"></div>
<div class="showHint"></div>
</div>

• 我想要 .DownloadThis 和 .ViewThis 的内联块属性，所以我将它们定义为内联块。
• 我已将 .ContainerTitle 定义为阻止
• 但是，屏幕截图中 .ContainerTitle 的属性可以清楚地显示为内联块
• 发生了什么事？为什么我的子容器会覆盖其父级的定义？（或者这是否真的发生了？或其他什么？）

我想做什么：

• 让.ContainerTitle显示：阻止，以便下一个＆lt; div＆gt;第六（6）个学期＆lt; / div＆gt; 容器将转到下一行...而不是坚持到前一个容器笨拙！
• 我希望整个.ContainerTitle表现为一个块，然后其中的所有div表现为内联块

我想得到这样的结果：

  

以下是我的代码段。请看一下并告诉我需要做什么：）

.ContainerTitle {
  display: block; 
  /* WHY IS THIS^ NOT WORKING?????*/
  background: #fff;
  float: left;
  padding: 15px;
  padding-left: 15px;
  border: solid 1px #000;
  font-size: Large;
  color: #000;
  text-align: left;
  cursor: pointer;
  transition: all .1s ease-out;
}
.DownloadThis,
.ViewThis {
  display: inline-block;
  padding: 20px;
  padding-bottom: 10px;
  border: solid 1px #fff;
  width: 40px;
}
.showHint {
  margin-top: 20px;
  background: #f1f1f1;
  transition: all .9 ease-out;
}
.ContainerTitle:hover .showHint:after {
  content: '*Hint: Hint Text';
  transition: all .9 ease-out;
}
.ViewThis:hover + .showHint:after {
  content: '*Hint: View Online';
  transition: all .9 ease-out;
}
.DownloadThis:hover ~ .showHint:after {
  content: '*Hint: Download This';
  transition: all .9 ease-out;
}
.DownloadThis {
  background: #1D9C73;
  color: #fff;
}
.ViewThis {
  background: #7D529E;
  color: #fff;
}
.DownloadThis:hover,
.ViewThis:hover {
  border: solid 1px #000;
  background: #fff;
}
.DownloadThis:hover {
  color: #1D9C73;
}
.ViewThis:hover {
  color: #7D529E;
}
.ContainerTitle:before,
.DownloadThis:before,
.ViewThis:before {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-left: 6px;
  padding-right: 8px;
  font-size: 32px;
}
.ContainerTitle:before {
  content: '\f0f6';
  font-size: 24px;
}
.DownloadThis:before {
  content: '\f019';
}
.ViewThis:before {
  content: '\f06e';
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />

<div class="ContainerTitle">TESTING:
  <div class="DownloadThis"></div>
  <div class="ViewThis"></div>
  <div class="showHint"></div>
</div>

<div style="background: #4399CD; padding: 30px; color: #fff;display:inline-block;padding-left: 15px; ">
  Sixth (6th) Semester
</div>

Answer 1

＆＃13;

＆＃13;

.ContainerTitle {
  display: block; 
  /* WHY IS THIS^ NOT WORKING?????*/
  background: #fff;
  float: left;
  padding: 15px;
  padding-left: 15px;
  border: solid 1px #000;
  font-size: Large;
  color: #000;
  text-align: left;
  cursor: pointer;
  transition: all .1s ease-out;
}
.DownloadThis,
.ViewThis {
  display: inline-block;
  padding: 20px;
  padding-bottom: 10px;
  border: solid 1px #fff;
  width: 40px;
}
.showHint {
  margin-top: 20px;
  background: #f1f1f1;
  transition: all .9 ease-out;
}
.ContainerTitle:hover .showHint:after {
  content: '*Hint: Hint Text';
  transition: all .9 ease-out;
}
.ViewThis:hover + .showHint:after {
  content: '*Hint: View Online';
  transition: all .9 ease-out;
}
.DownloadThis:hover ~ .showHint:after {
  content: '*Hint: Download This';
  transition: all .9 ease-out;
}
.DownloadThis {
  background: #1D9C73;
  color: #fff;
}
.ViewThis {
  background: #7D529E;
  color: #fff;
}
.DownloadThis:hover,
.ViewThis:hover {
  border: solid 1px #000;
  background: #fff;
}
.DownloadThis:hover {
  color: #1D9C73;
}
.ViewThis:hover {
  color: #7D529E;
}
.ContainerTitle:before,
.DownloadThis:before,
.ViewThis:before {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  padding-left: 6px;
  padding-right: 8px;
  font-size: 32px;
}
.ContainerTitle:before {
  content: '\f0f6';
  font-size: 24px;
}
.DownloadThis:before {
  content: '\f019';
}
.ViewThis:before {
  content: '\f06e';
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />

<div class="ContainerTitle">TESTING:
  <div class="DownloadThis"></div>
  <div class="ViewThis"></div>
  <div class="showHint"></div>
</div>

<div style="background: #4399CD; padding: 30px; color: #fff;display:inline-block;padding-left: 15px; clear:both; float:left">
  Sixth (6th) Semester
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在div中尝试以下css（ <div>Sixth (6th) Semester</div> ）：

clear:both; 
float:left;