Question

我想将文本排成我div中图像的顶部。

目前标题：网络研讨会，博客等位于广场顶部下方。我有一种风格：vertical-align：top;但它没有与广场的顶部对齐。

看我的小提琴 - http://jsfiddle.net/huskydawgs/e9pZr/ 的 HTML

<div id="wrapper-resources">
        <div id="resources_row">
            <div class="resources_cell1">
                <div class="resources_lt">
                    <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div>
                <div class="resources_rt">
                    <p><strong>Webinar</strong></p>
                </div>
            </div>
            <div class="resources_cell2">
                <div class="resources_lt">
                    <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div>
                <div class="resources_rt">
                    <p><strong>Article</strong></p>
                </div>
            </div>
            <div class="resources_cell3">
                <div class="resources_lt">
                    <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div>
                <div class="resources_rt">
                    <p><strong>Blog</strong></p>
                </div>
            </div>
            <div class="resources_cell4">
                <div class="resources_lt">
                    <img height="76" src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Box_Red.png" width="76" /></div>
                <div class="resources_rt">
                    <p><strong>Market</strong></p>
                </div>
            </div>
        </div>
    </div>

CSS

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

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

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

/* Fonts */

#wrapper-resources p {
color: #666666;
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
font-size: .9em;
line-height: 1.6em;

}

Answer 1

您需要将<p> http://jsfiddle.net/e9pZr/3/

的保证金重置为0

默认情况下margin:1em 0;，请参阅http://reference.sitepoint.com/css/collapsingmargins了解更多说明。

将文本排列到div中的图像顶部

1 个答案: