小编vep*_*elp的帖子

HTML

<div class="main">
    <h1>Test</h1>
    <span class="details">Jan 21, 2014</span>
</div>

CSS

.main{
    background-color: #666666;
    border: 1px solid red;
}
h1{
    background-color: #383838;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.main span{
    display: inline-block;
    vertical-align: middle;
}

的jsfiddle

这似乎是一个简单的问题,但我无法解决它或者我太懒了.只是想vertical-align: middle将它对齐到div的右侧,如果我使用float: right元素附加到上面边框的底部.不想使用line-height.

遇到CSS下推问题,一直在寻找修复,但无法找出究竟是什么问题.所有图标都以阶梯式布局显示.需要你的帮助来解决这个问题.

HTML

<div style="/*float: left; width:153.6px;" */ class="footerStyles">
  <h4 style=" margin: 0; font-size: 100%;">CONNECT</h4>
  <a href="#" class="email connectWith"></a>
  <br/>
  <a href="#" class="twitter connectWith"></a>
  <br/>
  <a href="#" class="facebook connectWith"></a>
  <br/>
  <a href="#" class="googleplus connectWith"></a>
  <div class="clear"></div>
</div>

CSS

.connectWith{
    /*background-position: left center; 
    background-repeat: no-repeat; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-left: 40px;*/ 
    margin-right: 0;
    padding: 0;
    float: left;
}
/* email    ---------- */
.email{
    width: 50px;
    height: 50px;
    text-decoration: none;
    display: block;
    text-indent: -9999px;
    background-image: url("http://www.browsealoud.com/images/browsealoud/plus/uk/firefox.jpg");
    background-position: 0 0;
}
.email:hover{
    background-position: 0 …

我正试图.active用jquery 切换这个类,这是我到目前为止所得到的:

HTML

<div class="downloadButtons">
            <div class="download-button-wrapper">
                    <div id="dd" class="desktopBackground downloadFontIcons" tabindex="1">DESKTOP
                        <ul class="dropdown">
                            <li><a href="#">2560 x 1440</a></li>
                            <li><a href="#">1800 x 900</a></li>
                        </ul>
                    </div>
            </div>

            <div class="download-button-wrapper">
                    <div id="de" class="tabletBackground downloadFontIcons" tabindex="1">PHONE
                        <ul class="dropdown">
                            <li><a href="#">640 x 960</a></li>
                            <li><a href="#">1136 x 640</a></li>
                            <li><a href="#">720 x 1280</a></li>

                        </ul>
                    </div>
            </div>  


            <div class="download-button-wrapper">
                    <div id="df" class="phoneBackground downloadFontIcons" tabindex="1">TABLET
                        <ul class="dropdown">
                            <li><a href="#">2560 x 1600</a></li>
                            <li><a href="#">2048 x 1536</a></li>
                        </ul>
                    </div>
            </div>
        <div style="clear:both"></div>
        </div>

CSS

.downloadButtons{
    display: block;
    width: 780px; …