1

这是我的CSS：

div.imgbeequick 
{
background: url('../img/beequick400-135.png') no-repeat center top; 
display: inline-block;
vertical-align: center;
width:45%;
margin:auto;
height:135px;
}


aside
{
padding:5px;
vertical-align: center;
color:black;
float:right;
}

@media screen and (min-width: 1076px)
{
    div.imgbeequick
    {
    width:45%;
    }

    aside
    {
    clear: both;
    float: right;
    vertical-align: center;
    }
}

@media screen and (max-width: 1075px)
{
    div.imgbeequick
    {
    width:100%;
    }

    aside
    {
    float: none;
    width:80%;
    margin:auto;
    text-align:center;
    }
}

问题是当我将窗口扩展到超过 1076 像素时，旁边的按钮不会正确浮动（但如果刷新期间的页面大小超过此大小，它会浮动）

这是整个页面的链接：http: //javascript-ninja.fr/beequickcomm/

旁边的按钮包含输入，div.imgbeequick 是蜜蜂的图像

4

2 回答 2

1

float:right;在旁白类中替换为display:inline-table

@media screen and (min-width: 1076px)
{
    div.imgbeequick
    {
    width:45%;
    }

    aside
    {
    clear: both;
    display: inline-table;
    }
}

哦，还有一件事......没有vertical-align: center;你的意思的价值可能是“中间”这样的事情，但在你的情况下没有必要。

inline-table 值在 HTML 中没有直接映射。它的行为类似于 HTML 元素，但作为内联框，而不是块级框。表格框内是块级上下文。（来源）

于 2013-07-09T08:26:42.213 回答
1

可能是，此更改可以帮助您获得所需的内容：

@media screen and (min-width: 1076px) {
    div.imgbeequick {
        width:45%;
        float: left; /* ADDED */
    }

    aside {
        /*clear: both; REMOVED */
        float: right;
        vertical-align: center;
    }
}

@media screen and (max-width: 1075px) {
    div.imgbeequick {
        width:100%;
        float: none; /* ADDED */
    }

    aside {
        float: none;
        width:80%;
        margin:auto;
        text-align:center;
    }
}
于 2013-07-09T08:23:05.723 回答