Так у меня есть следующая последовательность HTML:CSS: позиционирование
<div class="box-content">
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
</div>
Я пытаюсь отобразить их как на следующем рисунке: 
Кто-нибудь знает соответствующий CSS, чтобы сделать это?
Вы можете сделать это с Flexbox.
body, html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.box-content {
display: flex;
height: 100vh;
flex-wrap: wrap;
}
.box {
border: 3px solid black;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
background: #22B14C;
margin: 10px;
}
.box2, .box3{
flex: 0 0 calc(50% - 20px);
}
.box1 {
flex: 0 0 calc(100% - 20px);
}<div class="box-content">
<div class="box1 box">One</div>
<div class="box2 box">Two</div>
<div class="box3 box">Three</div>
</div>body {
color: white;
}
.box-content {
width: 700px;
height: 210px;
margin: 0 auto;
background: red;
border:10px solid red;
}
.box1 {
width: 680px;
height: 80px;
background: green;
padding: 10px;
}
.box2 {
width: 325px;
height: 80px;
background: green;
float: left;
padding: 10px;
margin-top: 10px;
}
.box3 {
width: 325px;
height: 80px;
background: green;
float: right;
padding: 10px;
margin-top: 10px;
}<div class="box-content">
<div class="box1 box">Box 1</div>
<div class="box2 box">Box 2</div>
<div class="box3 box">Box 3</div>
</div>
Go узнать подвесную систему бутстраповского http://getbootstrap.com/css/#grid. Вы будете поражены тем, как это спасает жизнь, а также реагирует на планшетные и мобильные устройства. – Warface