Question

这是我的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 px以上时，旁边按钮不会浮动（但如果刷新期间的页面大小超过此大小，它会浮动）

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

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

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

Answer 2

使用float:right;

替换旁边课程中的display:inline-table

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

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

哦，还有一件事......没有vertical-align: center;这样的东西，你所说的价值可能是'中间'，但在你的情况下没有必要。

内联表值在HTML中没有直接映射。它表现得像一个HTML元素，但作为内联框，而不是块级框。表格框内部是块级上下文。（source）

Float和@media查询似乎不能一起工作

2 个答案: