0

このグリッド実験を試しています。ここに問題があります。下のボックスを約 90% 以上埋めようとしています。将来、私も他の人たちと同じことをするかもしれません。

私たちが見たいのは、これを上記のように複数のボックスに展開することです。

たとえば、下のボックスは 2 番目の行よりも大きく、約 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