0

我正在尝试这个网格实验。这就是问题所在，我们试图让底部的盒子填充大约 90% 或更好。将来，我可能也会对其他人做同样的事情。

我们希望看到的是，通过将其扩展为多个框，就像上面一样。

例如，底部框将比第二行大，并且希望它约为 100%。

你能帮帮我吗？

这是HTML：

<!doctype html>

 <html><head>
 <meta charset="UTF-8">
 <title>Untitled Document</title>

  <link href="wxsite.css" rel="stylesheet" type="text/css"/>
  <style type="text/css">

  </style>
  </head>

  <body>

  <div id="wrap">

 <div class="grid" > 
  <div class="row"> 
 <div class="image"> 
 <img src="images/photo1.jpg" alt="A Lily" /> 
 <p>A lily in the gardens of The Vyne Country House</p> 
 </div> 

 </div> 
 <div class="row"> 
 <div class="image"> 
 <img src="images/photo2.jpg" alt="A crazy looking Allium flower" />
 <p>A crazy looking flower</p>
 </div>
 <div class="image">
 <img src="images/photo4.jpg" alt="A Robin sitting on a fence" />
  <p>
 This robin has been visiting our garden over the summer. 
 He is very friendly and doesn't seem to be too worried about sharing the garden  
 with us.
 </p>

 <p>
 This robin has been visiting our garden over the summer. 
 He is very friendly and doesn't seem to be too worried about sharing the garden with 
 us.
 </p>

 </div>
 <div class="image">

 <img src="images/photo4.jpg" alt="A Robin sitting on a fence" />
 <p>
 This robin has been visiting our garden over the summer. 
 He is very friendly and doesn't seem to be too worried about sharing the garden   
 with us. 
 </p>

 <p>
 This robin has been visiting our garden over the summer. 
 He is very friendly and doesn't seem to be too worried about sharing the garden 
 with us.
 </p>

 </div>

 <div  class="image">
 <img src="images/photo4.jpg" alt="A Robin sitting on a fence" />
 <p>
 This robin has been visiting our garden over the summer. 
 He is very friendly and doesn't seem to be too worried about sharing the garden 
 with us.
 </p>
 <p>
 This robin has been visiting our garden over the summer. 
 He is very friendly and doesn't seem to be too worried about sharing the garden with
 us.
 </p>

 </div>
 </div>

 <div class="image" >
 <img src="images/photo4.jpg" alt="A Robin sitting on a fence" / >
 <p>
 This robin has been visiting our garden over the summer. 
 He is very friendly and doesn't seem to be too worried about sharing the garden 
 with us.
 </p> 
 </div>  

 <p>
 This robin has been visiting our garden over the summer. 
 He is very friendly and doesn't seem to be too worried about sharing the garden 
 with us.
 </p>

 </div>
 </div>
 </div>

 </body>
 </html>

现在对于 CSS 部分：

 /*html layout*/    
 html {
 margin:0; 
 padding:0; 
 background:#a7a09a; 
 color:#000; } 
 #wrap {
 width:780px; 
 margin:0 auto; 
 background:#99c;     
 }

 /*main body*/
 #main {
 float: right;
 height: 64.5em;
 width: 607px;
 padding: 0px;
 background-color: #FFF;
 }
 h2 {margin:0 0 1em;}

 .grid { width:100%;
 display: table; 
 border-spacing: 4px; 
 } 
 .row { 
 display: table-row; 
 } 
 .image { 
 display: table-cell; 
 width: 240px; 
 background-color: #000; 
 border: 8px solid #000; 
 vertical-align: top; 
 text-align: center; 
 } 
 .image p { 
 color: #fff; 
 font-size: 85%; 
 text-align: left;
 padding-top: 8px;

最重要的是，我希望看到的是能够将我所有的盒子调整到任何大小、高度和长度。

谢谢，非常感谢您的帮助！周末愉快！

4

0 回答 0