javascript - 垂直对齐 DIV 框中的文本和图像

Question

我需要创建一个布局(下面的布局图像链接)

Layout Image Link

我想让 DIV 框与图像和文本的空间垂直对齐。

顶部我希望 DIV 框在左侧有文本字段，在左侧有图像。

我想将侧边栏分成两部分。顶部和底部

底部我希望有 2 个 div 框并排垂直对齐，左侧是图像，右侧是文本

DIV 框的高度应根据文本输入扩展，如果有更多文本行(例如:在顶部的 DIV 框)，则应将 2 个并排的 DIV 向下推。

与 2x2 并排 div 框相同。

此外，我应该能够根据我的要求在底部添加 2x2 的 div 框

请帮助我创建此布局。

Answer 1

这将对您有所帮助 ( http://jsfiddle.net/h7funt7k/2/ ):

HTML:

  <p><span style="font-size: 10pt; font-family: verdana, sans-serif">Sample Text</span>
  </p>
  <p><span style="font-size: 10pt; font-family: verdana, sans-serif"></span>&#160;&#160;</p>

  <div class="sidebar" style="background-color: #f00">
    <center>
      <h3 style="color: #0066CC">sidebar1 </h3>
    </center>
  </div>
  <div class="sidebar" style="background-color: #f00">
    <center>
      <h3 style="color: #0066CC">sidebar2 </h3>
    </center>
  </div>
<div class="topbox" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Top box</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Service Governance</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Change Management</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">People Board</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Software Asset Management</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Finance Management</h3>
    </center>
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <center>
      <h3 style="color: #0066CC">Vendor Governance</h3>
    </center>
  </div>


</body>

</html>

CSS:

DIV.box {
  HEIGHT: 150px;
  WIDTH: 40%;
  FLOAT: right;
  MARGIN: 0px 1% 1% 0px
}
.topbox {
  HEIGHT: 150px;
  WIDTH: 81%;
  FLOAT: right;
  MARGIN: 0px 1% 1% 0px

}
.sidebar {
  float: right;
  display: block;
  width: 10%;
  height: 300px;
  margin: 1% 0 0 0;
}