4 Div Block连续排列，每个块有2个div

时间：2013-12-23 19:24:00

标签： css html

此代码是否使用了我正在尝试做的最佳做法？基本上我想要四个div块来填充100％的空间（每个div块将是25％）。

然后在每个div块中，我想在左边有一个图像，在右边有文本（在图像和文本之间有20像素的空间）

如何计算文字的百分比？因为我的图像百分比为33％，边距为20 px。

http://jsfiddle.net/UMf3k/137/ 

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

2 个答案:

答案 0 :(得分：0)

.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;
}

你应该添加float：left;到.resources_lt类的样式，以及浮点数：到.resources.rt。

此外，您需要在.resources_lt中设置图像的样式，以便它们不占用超过其父div（.resources_lt）的空间，并使高度与宽度成比例。这将保留20px间距。

最后，你需要在.resources_rt中添加word-wrap：break-word - 至少在这个例子中 - 因为更长的单词会戳出文本区域的一边。

答案 1 :(得分：0)

我花了一个多小时的时间来表达它。希望它对你有所帮助。          

    <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

enter image description here

enter image description here

相关问题
最新问题