Question

我以前见过这个，但是自己也找不到怎么做。

基本上，我们左边有文字，右边有图像。

当窗口最小化时，我们希望图像显示在文本上方，而不是通常情况下低于它。

这就是我能解决的问题。关于如何做得更好的任何想法？

<!doctype html>
<html>
<head>
    <style type="text/css">

        .left{
            width:60%;
            position:absolute;
            padding:0px 30px;

        }

        .right{
            width:250px;
            height:250px;
            background-color:red;
            float:right;
            margin:0px 30px;
        }

        @media screen and (max-width: 800px) {
            .left{
                width:90%;
                top:275px;

            }

            .right{
                float:none;
                margin: 0 auto;
            }
        }

    </style>    
</head>

<body>
<p class="left">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<div class="right">
</div>
</body>
</html>

这是一个jsfiddle：https://jsfiddle.net/4aerjgd6/

P.S。为什么在这个例子中，当窗口最小化时，会出现一个水平滚动条 - 有什么办法可以避免这种情况吗？

谢谢， w ^

Answer 1

1）您可以使用媒体查询来检测设备宽度，如果内容小于某个值，则可以更改img标记的CSS属性（无论您考虑什么＆＃34;最小化＆＃34）

2）在您的情况下，将float property元素上的img更改为 float：left;

例如：

@media (min-width: 768px) {
  img {
     float: left;
  }
}

当窗口最小化时，如果<div .right =“”>在<div .left =“”>的右边，当窗口是<div .left =“”>时，如何将<div .right =“”>置于<div .left =“”>上方大

1 个答案: