Question

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

Layout Image Link

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

顶部我希望DIV Box的左侧是文本字段，左侧是图像。

我希望侧栏分成2.顶部和底部

底部我希望有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;
}

Answer 2

我只在第一行工作，但其余的应该是相同的想法。

http://jsfiddle.net/h7funt7k/3/

CSS

  <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="box" style="background-color: #EBEBEB">
    <div class="imageDiv">
      <img class="image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </div>
    <div class="text">
      <center>
        <h3 style="color: #0066CC">Service Governance</h3>
      </center>
    </div>    
  </div>
  <div class="box" style="background-color: #EBEBEB">
    <div class="imageDiv">
      <img class="image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </div>
    <div class="text">
      <center>
        <h3 style="color: #0066CC">Change Managemen</h3>
      </center>
    </div>
  </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>

HTML

Welcome.blade.php

Answer 3

这可以帮助您（https://jsfiddle.net/g0cbeaga/）

HTML

 <div class="boxes">
        <div class="top-box">
            <img src=""/>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et</p>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
        </div>
    </div>
    <div class="sidebar">
        <div class="sidebar-top">
            <img src="" />
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
        </div>
        <div class="sidebar-bottom">
            <img src="" />
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
        </div>
    </div>

CSS

.boxes {
  float: left;
  width: 580px;
  height: 600px;
}
.top-box {
  padding: 20px;
  width: 540px;
  height: 255px;
  background-color: #800000;
}
.top-box img {
  float: right;
  width: 150px;
  height: 150px;
  background-color: #808080;
}
.sidebar {
  float: right;
  width: 200px;
  height: 600px;
  text-align: center;
}
.sidebar-top {
  padding: 20px;
  width: 160px;
  height: 255px;
  background-color: #800000;
}
.sidebar-bottom {
  margin-top: 10px;
  padding: 20px;
  width: 160px;
  height: 255px;
  background-color: #800000;
}
.sidebar-top img , .sidebar-bottom img {
  width: 150px;
  height: 150px;
  background-color: #808080;
}

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

3 个答案: