html - 普通和移动浏览器中图片后面的 Div 栏

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

如果屏幕尺寸为 640 像素或更小，它会将文本居中对齐并移除内边距。 http://jsfiddle.net/UuP9Y/