div的HTML布局

如何生成具有以下布局的div，以便在调整其大小时调整其内容？我应该如何构造它，以便能够利用媒体查询？我需要另一个div来包装这一切吗

+-----------+---------------------------------------+
+           + Title                                 +
+Image      + Description                           +
+           +                                       +
+-----------+---------------------------------------+
+Another container                                  +
+                                                   +
+---------------------------------------------------+   

更新： 用了两个答案，得出了

左上角
右上角
容器

试试这个：

    <div >
    <div  style="float:left width:50%">Image</div>
    <div  style="float:right width:50%">
    <div >Title</div>
    <div >Description </div>
    </div>
    </div>
    <div  style=" width:100%">Another container </div>

形象
标题
描述
另一个容器

如果您想充分利用CSS3并消除内联样式（错误）和浮动，请尝试：

它还具有以下额外好处：

调整页面大小

将包含图像的单元格最小化为仅图像大小（宽度）

HTML

---

我总是喜欢包装结构，但这不是必需的，因此我会尝试以下方法：

HTML

    <div id="main" class="wrapper">
      <div id="topleft" class="left"></div>
      <div id="topright" class="right"></div>
      <div style = "clear:both">
      <div id="container"></div>
    </div>

---

您希望如何调整其内容？按比例？我们现在是否使用元素创建表？就像10年前，我们使用元素来创建布局，正好相反

<div id="main">
  <div id="logo"></div>
  <div id="desc"></div>
  <div id="clr"></div>
  <div id="content"></div>
</div>

#main {margin:0;padding:0;}
#logo {width:20%;float:left;}
#desc {width:80%;float:left;}
#clr{width:100%;clear:both;}
#content{width:100%;}

<div class='table'>
    <div class='cell'>Image</div>
    <div class='cell'>Title<br />Description</div>
    <div class='caption'>Another container </div>
</div>

.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
}
.cell :first-child{
    width:1%;
}
.caption {
    display:table-caption;
    caption-side:bottom;
}
.cell, .caption {
    border:1px solid black;

}

    <div id="main" class="wrapper">
      <div id="topleft" class="left"></div>
      <div id="topright" class="right"></div>
      <div style = "clear:both">
      <div id="container"></div>
    </div>

    #main {size that you want}
    #topleft {size that you want}
    #topright {size that you want}
    .left { float: left; }
    .right { float: right; }
    #container { width: 100% }

<section>
    <div class="inlineImg">
        <!-- image -->
    </div>
    <aside>
        <h3>Title</h3>
        <p>Description</p>
    </aside>
</section>
<section id="other">Another Container</section>

* {
    margin: 0;
    padding: 0;
}

section {
    width: 100%;
    overflow: hidden;
    background-color: green;
}

div.inlineImg {
    background-color: blue;
    width: 40%;
    height: 100px;
    float: left;
}

aside {
    width: 60%;
    height: 100px;
    background-color: red;
    float: left;
}

#other {
    height: 100px;
}