Question

我目前正在一个网站上工作，我有一个人的照片。图片的右边我想要的名字和描述。名称应具有与描述不同的背景。我上传了一张应该如何显示的照片：http://www.tiikoni.com/tis/view/?id=fa13202 这是我到目前为止所提出的：http://jsfiddle.net/dse74/

#empty {
    width: 100%;
    height:40px;
}
#left {
    float:left;
    width:180px;
    z-index: 2;
}
#rightRed {
    padding-left:220px;
    width: 100%;
    background-color:red;
    height:40px;
}
#right {
    padding-left:220px;
    position:absolut;
    background-color:#00FF00;
    z-index: 2;
}

<div>
    <div id="left">
        <img src="http://img2.wikia.nocookie.net/__cb20071127032702/uncyclopedia/images/1/16/641px-Mad_scientist_transparent_background.svg.png" style="width:180px" />
    </div>
    <div id="empty"></div>
    <div id="rightRed">Lorem ipsum dolor</div>
    <div id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu ullamcorper risus, id varius eros. Nullam eleifend augue convallis, consectetur elit non, condimentum diam. Nullam sapien nibh, congue hendrerit placerat at, convallis scelerisque nisl. Morbi viverra tortor nisi, tincidunt ornare dui consequat id. Aliquam lorem tellus, egestas et nunc a, faucibus ullamcorper nunc. Sed sollicitudin sapien eget tellus faucibus, quis semper dolor vehicula. In placerat nulla mi, sit amet luctus tellus placerat sed.t</div>
</div>

普通浏览器看起来不错，但不幸的是在移动浏览器中看起来并不像我想要的那样。以下是我想要为移动浏览器实现的图片：http://www.tiikoni.com/tis/view/?id=10ac016

不幸的是我不知道怎么做。有人可以帮帮我吗？

谢谢！

Answer 1

您可以在头部添加<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">并将@media only screen and (max-width:640px)添加到您的css中：

#empty {
            width: 100%;
            height:40px;
        }
        #left {
            float:left;
            width:180px;
            z-index: 2;
        }
        #rightRed {
            padding-left:220px;
            width: 100%;
            background-color:red;
            height:40px;
        }
        #right {
            padding-left:220px;
            background-color:#00FF00;
            z-index: 2;
        }
    @media only screen and (max-width:640px) {
        #rightRed {
            text-align: center;
            padding: 0px;   
        }
        #right {
            text-align: center; 
            padding: 0px;
        }
    }

如果屏幕尺寸为640px或更小，它会将文本与中心对齐并删除填充。 http://jsfiddle.net/UuP9Y/

正常和移动浏览器中的图片背后的条形图

1 个答案: