嵌套的div未正确显示

Question

我想创建一个嵌套在其中的两列的列。我也想连续创建其中的一些。

下图显示了我想要实现的目标：

我尝试在代码段中对以下内容进行编码，但它看起来并不像我尝试重新创建的图像。

我不知道如何得到这个，因为我认为这将是直接的工作。

感谢。

＆＃13;

＆＃13;

.matches {
  background: #999;
}
.club-back {
  height: 230px;
}
.team-data {
  background: #fff;
  color: #000;
  padding: 0 5px;
  margin-bottom: 15px;
  height: 100%;
}
.team-data p {
  font-size: 18px;
  color: #000;
  text-align: center;
  margin: 0;
}
.team-data p:first-child {
  padding-bottom: 15px;
}
.team-data p:last-child {
  margin: 0;
  font-size: 12px;
}
.team-data span {
  font-weight: normal;
  font-size: 14px;
}

＆＃13;

<div class="container">

  <div class="col-md-12">
    <div id="slider-three">
      <div class="row">
        <div class="col-md-3 matches">
          <div class="row">
            <p class="text-center">title</p>
            <div class="col-md-4">
              <div class="club-back">
                <div class="col-md-12 team-data">
                  <p>
                    <img src="http://placehold.it/130x140" class="center-block" alt="image" />
                  </p>
                  <p>Title</p>
                  <p>sub-title</p>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="club-back">
                <div class="col-md-12 team-data">
                  <p>
                    <img src="http://placehold.it/130x140" class="center-block" alt="image" />
                  </p>
                  <p>Title</p>
                  <p>Sub-title</p>
                </div>
              </div>
            </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为你没有将bootstrap.css库包含在你的代码中。在下面的片段中，我添加了cdn。全屏查看结果。

＆＃13;

＆＃13;

.matches {
  background: #999;
}
.club-back {
  height: 230px;
}
.team-data {
  background: #fff;
  color: #000;
  padding: 0 5px;
  margin-bottom: 15px;
  height: 100%;
}
.team-data p {
  font-size: 18px;
  color: #000;
  text-align: center;
  margin: 0;
}
.team-data p:first-child {
  padding-bottom: 15px;
}
.team-data p:last-child {
  margin: 0;
  font-size: 12px;
}
.team-data span {
  font-weight: normal;
  font-size: 14px;
}
.margin-bottom{margin-bottom:20px;}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">

  <div class="col-md-12">
    <div id="slider-three">
      <div class="row">
        <div class="col-md-4 matches">
          <div class="row">
            <p class="text-center">title</p>
            <div class="col-md-6 margin-bottom">
              <div class="club-back">
                <div class="col-md-12 team-data">
                  <p>
                    <img src="http://placehold.it/130x140" class="center-block" alt="image" />
                  </p>
                  <p>Title</p>
                  <p>sub-title</p>
                </div>
              </div>
            </div>

            <div class="col-md-6 margin-bottom">
              <div class="club-back">
                <div class="col-md-12 team-data">
                  <p>
                    <img src="http://placehold.it/130x140" class="center-block" alt="image" />
                  </p>
                  <p>Title</p>
                  <p>Sub-title</p>
                </div>
              </div>
            </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

喜欢这个

#container{
  width:100%;
  height:300px;
  background:grey;
}
#header{
  width:100%;

  text-align:center;
  margin-top:32px;
}
.column{
  margin-left:2%;
  margin-right:2%;
  width:46%;
  float:left;
  height:200px;
  background: white;

}

<div id="container">
  <div id="header">header</div>
  <div class="column">asdf</div>
  <div class="column">asdf</div>
</div>