html - 是否可以通过在 HTML 和 CSS 中创建表格来实现

Question

我知道一点 javascript 和 Jquery，但我更喜欢使用 HTML 和 Css。

This image was created in Word, if I can replicate this in HTML and Css that would be great

Answer 1

引导解决方案 - 将页面分成三份，然后为左右两列添加垂直堆叠的 div，这些 div 跨越这些列的整个宽度。

.columnWrapper{border: solid 1px #333;text-align:center;margin:0}
#leftColumn {
  border-right: solid 1px #333;
  padding:0
}

#rightColumn {
  border-left: solid 1px #333;
  padding:0
}


#leftColumn div,
#rightColumn div{
  border-bottom: solid 1px #333;
  line-height:3em
}

#leftColumn div:last-of-type,
#rightColumn div:last-of-type {
 border-bottom-width: 0
}

#middleColumn {
 line-height: 9em;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
   <div class="columnWrapper clearfix">
      <div class="col-xs-4" id="leftColumn">
       <div>TEXT</div>
       <div>TEXT</div>
       <div>TEXT</div>
     </div>
     <div class="col-xs-4" id="middleColumn">
       <div>PHOTO</div>
      </div>
     <div class="col-xs-4" id="rightColumn">
       <div>TEXT</div>
       <div>TEXT</div>
       <div>TEXT</div>
      </div>
    </div>