Fatal编程技术网
  • css/
  • Css 一行4个Div块，每个块2个Div

Css 一行4个Div块，每个块2个Div

css html

Css 一行4个Div块，每个块2个Div,css,html,Css,Html,这段代码是否使用了我所尝试的最佳实践？基本上我想要四个div块来填充100%的空间（每个div块是25%） <head> <style> #wrapper-resources { position:relative; width:100%; border: none; margin: 50px 0 0 0; } #resources_row {

这段代码是否使用了我所尝试的最佳实践？基本上我想要四个div块来填充100%的空间（每个div块是25%）

    <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>
然后在每个div块中，我希望在左边有一个图像，在右边有一个文本（在图像和文本之间有一个20px的空间）

    <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>
我如何计算文本的百分比？因为我的图像百分比是33%，右边是20像素

    <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>


    <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>
您应该添加float:left；指向.resources\u lt类上的样式，并浮动：右键指向.resources.rt

    <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>
此外，您需要在.resources\u lt中设置图像的样式，以便它们不会占用超过其父div（.resources\u lt）的空间，并且使高度比例与宽度成比例。这将保留20px的间距

    <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>
最后，您需要在.resources\r\n中的文本中添加换行符：break word，至少在本例中是这样，因为较长的单词会突出文本区域的侧面。

我花了一个多小时来完成它。希望它对您有所帮助。 
    <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>


    <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>


#包装器资源{
位置：相对位置；
宽度：100%；
边界：无；
利润率：50px0；
}
#资源组{
身高：100%；
空白：nowrap；
}
.resources\u cell 1、.resources\u cell 2、.resources\u cell 3、.resources\u cell 4{
身高：100%；
宽度：24%；
最小宽度：80px；
显示：内联块；
空白：正常；
边框：1px实心#744646；
不透明度：1；
边界半径：5px；
盒影：0 6px 16px#6A806A；
-webkit边界半径：5px；
-moz边界半径：5px；
-ms边界半径：5px；
-o-边界半径：5px；
-webkit转换：所有.2易入易出；
-moz转换：所有.2秒的输入输出；
-ms转换：所有.2易入易出；
-o-转换：所有.2缓进-缓出；
转换：所有.2易入易出；
}
.resources\u cell 1:hover、.resources\u cell 2:hover、.resources\u cell 3:hover、.resources\u cell 4:hover{
盒影：0 0 5px#962828；
不透明度：0.75；
}
.资源{
身高：100%；
宽度：33%；
显示：内联块；
空白：正常；
右边距：20px；
垂直对齐：顶部；
}
.资源{
身高：100%；
宽度：50%；
最小宽度：80px；
显示：内联块；
空白：正常；
垂直对齐：顶部；
}
.资源{
字体系列：草书；
字体风格：普通；
填充：5px 0px 5px 10px；
颜色：#000；
线高：22px；
不透明度：0.75；
-webkit转换：所有.2易入易出；
-moz转换：所有.2秒的输入输出；
-ms转换：所有.2易入易出；
-o-转换：所有.2缓进-缓出；
转换：所有.2易入易出；
}
.resources\u rt p：悬停{
颜色：#1FA719；
字体风格：普通；
不透明度：1；
}
.资源{
垫底：5px；
显示：块；
}
.resources\u lt img{
利润率：10%；
}
.resources\u lt img:悬停{
不透明度：0.7；
}
网络研讨会
资本项目：世界上隐藏的宝石


    <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>


文章
资本项目：世界上隐藏的宝石


    <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>


博客
资本项目：世界上隐藏的宝石


    <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>


新闻
资本项目：世界上隐藏的宝石


    <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>




    <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>


    <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>


float:left
图像并将
clearfix
应用于容器？据我所知，在混合百分比和像素时，您无法计算文本的百分比，好的一面是，如果您使用
float:left；将图像向左浮动，您实际上不必给它任何宽度。如果您的浏览器支持可以接受，您可以使用CSS。我将如何在CSS中添加Float:left？

    <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>