4個塊在每塊中有2個div的塊

這段代碼是否使用了我想要做的最佳實踐？基本上我想要四個div塊以100％填充空間（每個div塊將是25％）。4個塊在每塊中有2個div的塊

然後在每個DIV塊，我想有左邊和文字右側的圖像（與20像素的空間圖像和文本之間）

我如何找出的百分比文本？由於我的圖像百分比爲33％，而20倍的保證金爲右。

<div id="wrapper-resources"> 
    <div id="resources_row"> 
     <div class="resources_cell1"> 
      <div class="resources_lt"> 
      <img src="http://icons.iconarchive.com/icons/aha-soft/food/256/apple-icon.png" width="76" height="76" /> 
      </div> 
      <div class="resources_rt"> 
       <p><strong>Webinar</strong> 
       Capital Projects: Hidden Gems In The World</p> 
      </div> 
     </div> 
     <div class="resources_cell2"> 
      <div class="resources_lt"> 
      <img src="http://www.purelynaturalskin.co.uk/wp-content/uploads/2011/09/Sweet-Orange-Oil.jpg" width="76" height="76" /> 
      </div> 
      <div class="resources_rt"> 
       <p><strong>Article</strong> 
       Capital Projects: Hidden Gems In The World</p> 
      </div> 
     </div> 
     <div class="resources_cell3"> 
      <div class="resources_lt"> 
      <img src="http://images.wikia.com/uncyclopedia/images/archive/d/d4/20080204233721!Pear.jpg" width="76" height="76" /> 
      </div> 
      <div class="resources_rt"> 
       <p><strong>Blog</strong> 
       Capital Projects: Hidden Gems In The World</p> 
      </div> 
     </div> 
     <div class="resources_cell4"> 
      <div class="resources_lt"> 
      <img src="http://www.whataboutwatermelon.com/wp-content/uploads/2009/06/watermelon_simple.jpg" width="76" height="76" /> 
      </div> 
      <div class="resources_rt"> 
       <p><strong>News</strong><br> 
       Capital Projects: Hidden Gems In The World</p> 
      </div> 
     </div> 
    </div> 
</div> 

#wrapper-resources { 
position:relative; 
width:100%; 
border: none; 
margin: 50px 0 0 0;

}

#resources_row { 
height:100%; 
white-space:nowrap; 
} 

.resources_cell1, .resources_cell2, .resources_cell3, .resources_cell4 { 
height:100%; 
width:25%; 
display:inline-block; 
white-space:normal; 
border: 1px solid red;  
} 

.resources_lt { 
height:100%; 
width:33%; 
display:inline-block; 
white-space:normal; 
margin-right: 20px; 
vertical-align: top; 
border: 1px solid red; 
} 

.resources_rt { 
height:100%; 
width:50%; 
display:inline-block; 
white-space:normal; 
vertical-align: top; 
border: 1px solid red; 
}

來源

2013-12-23 user3075987

'浮動：left'圖像和應用'clearfix'到容器？ – crush

據我所知，當混合百分比和像素時，你無法弄清楚文本的百分比，在光明的一面，如果你將圖像浮動到左邊，你根本不需要給它任何寬度，浮動：左;'。 –

如果您的瀏覽器支持可接受，則可以使用CSS ['calc（）']（http://caniuse.com/calc）。 – crush

.resources_lt { 
    height:100%; 
    width:33%; 
    display:inline-block; 
    white-space:normal; 
    margin-right: 20px; 
    vertical-align: top; 
    border: 1px solid red; 
    float: left; 
} 

.resources_lt img { 
    max-width: 100%; 
    height: auto; 
} 

.resources_rt { 
    height:100%; 
    max-width:50%; 
    display:inline-block; 
    white-space:normal; 
    vertical-align: top; 
    border: 1px solid red; 
    float: right; 
    word-wrap:break-word; 
}

您應該添加浮動：左;您的.resources_lt類中的樣式，以及float：right to .resources.rt。

此外，您需要設置.resources_lt中的圖像樣式，以便它們不會超過其父div（.resources_lt）的空間，並使高度比例與寬度成比例。這將保持20px的間距。

最後，您需要在.resources_rt文本中添加word-wrap：break-word - 至少在本例中 - 因爲較長的單詞會將文本區域的一側戳出。

來源

2013-12-23 21:24:19 Ceili

我花了一個多小時，希望能對你有所幫助。

<head> 
     <style> 
    #wrapper-resources { 
     position:relative; 
     width:100%; 
     border: none; 
     margin: 50px 0 0 0; 
    } 

    #resources_row { 
     height:100%; 
     white-space:nowrap; 
     } 

    .resources_cell1, .resources_cell2, .resources_cell3, .resources_cell4 { 
     height:100%; 
     width:24%; 
     min-width: 80px; 
     display:inline-block; 
     white-space:normal; 
     border: 1px solid #744646; 
     opacity: 1; 
     border-radius: 5px; 
     box-shadow: 0 6px 16px #6A806A; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     -ms-border-radius: 5px; 
     -o-border-radius: 5px; 
     -webkit-transition:all .2s ease-in-out; 
     -moz-transition:all .2s ease-in-out ; 
     -ms-transition:all .2s ease-in-out; 
     -o-transition:all .2s ease-in-out; 
     transition:all .2s ease-in-out ; 


    } 

    .resources_cell1:hover, .resources_cell2:hover, .resources_cell3:hover, .resources_cell4:hover { 
     box-shadow: 0 0 5px #962828; 
     opacity:0.75; 
    } 

    .resources_lt { 
     height:100%; 
     width:33%; 
     display:inline-block; 
     white-space:normal; 
     margin-right: 20px; 
     vertical-align: top; 

    } 

    .resources_rt { 
     height:100%; 
     width:50%; 
     min-width: 80px; 
     display:inline-block; 
     white-space:normal; 
     vertical-align: top; 

    } 

    .resources_rt p { 
     font-family: cursive; 
     font-style: normal; 
     padding: 5px 0px 5px 10px; 
     color: #000; 
     line-height: 22px; 
     opacity: 0.75; 
     -webkit-transition:all .2s ease-in-out; 
     -moz-transition:all .2s ease-in-out ; 
     -ms-transition:all .2s ease-in-out; 
     -o-transition:all .2s ease-in-out; 
     transition:all .2s ease-in-out ; 
    } 
    .resources_rt p:hover { 
     color:#1FA719; 
     font-style: normal; 
     opacity: 1; 

    } 

    .resources_rt strong { 
     padding-bottom: 5px; 
     display: block; 
    } 
    .resources_lt img { 

     margin:10%; 
    } 

    .resources_lt img:hover { 
     opacity: 0.7; 
    } 

     </style> 
    </head> 

    <body> 
      <div id="wrapper-resources"> 
      <div id="resources_row"> 
      <div class="resources_cell1"> 
       <div class="resources_lt"> 
        <img src="http://icons.iconarchive.com/icons/aha-soft/food/256/apple-icon.png" width="76" height="76" /> 
       </div> 
       <div class="resources_rt"> 
       <p><strong>Webinar</strong> 
       Capital Projects: Hidden Gems In The World</p> 
       </div> 
      </div> 
      <div class="resources_cell2"> 
       <div class="resources_lt"> 
       <img src="http://www.purelynaturalskin.co.uk/wp-content/uploads/2011/09/Sweet-Orange-Oil.jpg" width="76" height="76" /> 
       </div> 
       <div class="resources_rt"> 
       <p><strong>Article</strong> 
       Capital Projects: Hidden Gems In The World</p> 
       </div> 
      </div> 
      <div class="resources_cell3"> 
       <div class="resources_lt"> 
       <img src="http://images.wikia.com/uncyclopedia/images/archive/d/d4/20080204233721!Pear.jpg" width="76" height="76" /> 
       </div> 
       <div class="resources_rt"> 
       <p><strong>Blog</strong> 
       Capital Projects: Hidden Gems In The World</p> 
       </div> 
      </div> 
      <div class="resources_cell4"> 
       <div class="resources_lt"> 
       <img src="http://www.whataboutwatermelon.com/wp-content/uploads/2009/06/watermelon_simple.jpg" width="76" height="76" /> 
       </div> 
       <div class="resources_rt"> 
       <p><strong>News</strong> 
       Capital Projects: Hidden Gems In The World</p> 
       </div> 
      </div> 
      </div> 
       </div> 
    </body> 

</html>

enter image description here

來源

2013-12-23 21:39:44

4個塊在每塊中有2個div的塊

回答

相關問題