个人中心
gpt4 book ai didi

html - 文本不围绕 iPhone 上的 float 图像

转载 作者：太空宇宙 更新时间：2023-11-04 14:55:17 24 4
gpt4 key购买 nike

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

对于小宽度的 css 更改，您可以通过减少 witdh 从浏览器中看到它。问题是，在 google chrome 上，我的文字很好地围绕着图像，但是当我从我的 iPhone 访问该页面时，文字位于 img 下方。 float 属性在 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>

最佳答案

它可以工作，但问题是 iphone 屏幕较小 320，坏了...

..在我看来，这样做对于您的 iOS iphone 版本来说会更好看:

enter image description here

将图像包裹在你的 iPhone 上会使它过于突兀(太紧和丑陋)...我在这里所做的是关于我给 h1(关于我)的媒体查询

@media="屏幕和(最大宽度:480px)和(最小宽度:320px):

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

还有图像 (.slider) 我采用了 float: 并修复了 padding

这对我来说效果更好，如果你想更流畅，你可以使图像 100% 和高度自动，这样它在 iOS 上看起来更好(由你决定)。

关于html - 文本不围绕 iPhone 上的 float 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17026450/

24 4 0
文章推荐： css - 是什么导致我的页脚不在底部？
文章推荐： java - 在 SpringMVC 中通过 AOP 将一些内容设置到 Freemarker 页面中
文章推荐： Java 编码器。使用标签值作为属性值
文章推荐： html - 在 css 概念中垂直居中一个 div
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com