html - iPhone上的文字不在浮动图像周围

Question

我为移动设备创建了一个流畅的 CSS。这是我的网站点击这里

对于较小的宽度，css 会发生变化，您可以通过减小 witdh 从浏览器中看到它。问题是，在谷歌浏览器上，我的文字很好地包围了图像，但是当我从 iPhone 访问页面时，文字低于 img。浮动属性在 iOS 上不能正常工作吗？

移动 CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*!!!!!!!!!!!!!!!!!!Style BEGINS!!!!!!!!!!!!!!!!!!!!*/
body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    line-height: 120%;
   font-weight: 300;
    color: black;
    list-style:none;
    width: 100%;
    height: 100%;
}
h1
{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 200%;
    margin-bottom: 5px;
}

h2
{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 100%;
    margin-bottom:5px;

}
h3
{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 75%;
}
/*Wrapper of the whole mobile website*/
#wrapper
{   
    width: 100%;
    height: 100%;
    position:absolute;
}

/*Top buttons*/
#top_buttons
{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-transform: uppercase;
    width: 100%;
}
#top_buttons a
{
    text-decoration: none;
    color: white;
    background: black;
    width: 100%;
    display: inline-block;
    letter-spacing: 0.2em;
    line-height: 2em;
    padding: 0 0 0 10px;
    bottom: 0;
    border-bottom: grey solid 1px;
}

#top_buttons li:last-child
{
    border: none;
}
#paperbox
{
position:relative;
height: 100%;
width: 100%;
}

#main_sliding_pictures
{
float:right;
margin: 5px 5px 5px 5px;
}

#textwrapper
{
    padding: 15px 5px 5px 10px;
    letter-spacing: 0.1em;
}


.slider {
float:right;
  margin: 15px 5px 5px 25px;
  width: 183px; /* Update to your slider width */
  height: 183px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}


#icons
{
    float:bottom;
}


#icons li
{
    display: inline-block;
    padding: 0 0 0 10px;    
}

#icons a
{
    color: black;
    text-decoration: none;
}

#goUp
{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    width: 100%;
}
#goUp a
{
    text-decoration: none;
    color: white;
    background: black;
    width: 100%;
    display: inline-block;
    letter-spacing: 0.2em;
    line-height: 2em;
    padding: 0 0 0 10px;
    bottom: 0;
}

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=320">
        <title>Home page</title>
        <meta name="keywords" content="Homepage">
        <meta name="description" content="Homepage">
        <meta name="author" content="Conrad Chamerski">
        <link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)' href='css/narrow.css' />
        <link rel='stylesheet' media='screen and (min-width: 481px) and (max-width: 768px)' href='css/narrow.css' />
        <link rel='stylesheet' media='screen and (min-width: 769px)' href='css/wide.css' />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">


</script>
    </head>

    <body>
        <div id="wrapper">
            <nav id="top_buttons">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="Pages/Projects.html">Project</a></li>
                    <li><a href="Pages/Contact.html">Contact</a></li>
                </ul>
            </nav><!--end primary_nav-->

        <div id="paperbox" class="boxcontainer">
            <div id="main_sliding_pictures">
    <ul class="slider">
        <li>
   <img src="images/maface.jpeg" height="183px" width="183px" />
 </li>
 <li>
   <img src="images/ProjectPictures/elwirebike.jpg" height="183px" width="183px" />
 </li>
 <li>
   <img src="images/ProjectPictures/monitor2.jpg" height="183px" width="183px" alt="HELLO"/>
 </li>
 <li>
   <img src="images/ProjectPictures/projectsmall3.png" height="183px" width="183px" align="ITS WORKING!!!" />
 </li>
</ul>
            </div>

            <div id="textwrapper">
                <h1>
                    About me
                </h1>
                <h2>
                    Prospective electrical engineer from Concordia University. My educational interests span from programming to electronics. My hobbies are sports, technology and philosophy.
                </h2>
                <div id="rating"></div>
            </div><!--end textwrapper-->

            <div id="icons">
                <ul>
                    <li><a href="mailto:conradchamerski@gmail.com">
                    <img src="/images/logos/google.png" width="15px" height="15px">conradchamerski@gmail.com</a></li>
                    <li><a  href="http://www.linkedin.com/in/conradchamerski/">
                    <img src="/images/logos/linkedin.png" width="15px" height="15px">Linkedin</a></li>
                    <li><a  href="https://twitter.com/ConradChamerski">
                    <img src="/images/logos/twitter.png" width="15px" height="15px">Twitter</a></li>
                    <li><a href="http://stackoverflow.com/users/1631092/conrad-c">
                    <img src="/images/logos/stackoverflow.png" width="15px" height="15px">Stackoverflow</a></li>
                </ul>
            </div><!--end icons-->



    </div><!--end paperbox-->
            <div id="goUp">
            <a href="#home">Top</a>
        </div><!--end goUp-->
  </div><!--end wrapper-->

    <!--<footer>Copyright Conrad Chamerski 2013 &#169;</footer>
    -->


    <script src="js/javascript.js"></script>
  </p>
</body>
</html>

score 1 · Accepted Answer

它可以工作，但问题是 iphone 屏幕更小 320 会坏掉......

..在我看来，这样做会更适合您的 iOS iphone 版本：

在此处输入图像描述

将图像包裹在 iPhone 上会使其过于突兀（太紧和难看）......我在这里所做的是关于我给 h1 的媒体查询（关于我）

@media="screen and (max-width: 480px) and (min-width: 320px):

#textwrapper h1  {clear: both; padding: 12px 0;}

对于图像（.slider），我选择了float: 并修复了填充

这对我来说效果更好，如果你想要更光滑，你可以将图像设置为 100% 和高度自动，以便它在 iOS 上看起来更好（取决于你）。

html - iPhone上的文字不在浮动图像周围

1 回答 1

Related

Reference