Вложенные divs не отображаются должным образом

Question

Я хотел бы создать столбец с двумя вложенными внутри него столбцами. Я хотел бы создать несколько из них в ряд.

На рисунке ниже показано, что я пытаюсь достичь:

Я попытался закодировать следующее в сниппет, но он не похож на образ, который я пытаюсь воссоздать ,

Я не уверен, как это получить, поскольку я думал, что это будет прямое задание.

Спасибо.

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

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

Answer 1

Я думаю, что вы не включили библиотеку bootstrap.css в свой код. В нижеприведенном фрагменте я добавил cdn. См. Результат в полноэкранном режиме.

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

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

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>