个人中心
gpt4 book ai didi

html - 初学者 : How to get a fixed element to a left position (float left? ) - 包含 JSFiddle

转载 作者：行者123 更新时间：2023-11-28 12:49:25 24 4
gpt4 key购买 nike

我的问题是这个

我有一个 760 像素宽的大容器，里面有一个 700 像素的小容器，里面有一篇文章。现在我在文章左侧的 60px 容器中有社交按钮。当人们向下滚动容器时，我希望社交按钮保持原位(以便用户看到)。我试过这个。 “位置:固定”但这会将我的社交按钮移到左侧。一个解决方法是给它们左边 700 像素的边距。但这以后可能会成为一个问题(而且不是“很好”)。

我做了一个当前状态的jsfiddle(没有固定位置)

http://jsfiddle.net/MemCz/

HTML

<title>Artikel</title>


<body>

<div class="maincon">


    <div class="artikel"><h1>Amazon Fire TV review</h1><br>
    Amazon’s version of a media streamer is much like Apple’s or Roku’s: a basic black box that discreetly sits on my entertainment center. It’s a little larger and slightly thinner than the Apple TV or Roku 3, but that matters little — I just plugged the thing in and forgot about it. Aside from a small white LED on the front of the box to let me know it’s on, that’s it for alerts and design. The Fire TV isn’t expected to be a showpiece of my entertainment center, like a PlayStation 4 or Xbox One. It’s just supposed to blend into the background and do its job. Because really, this isn’t a story about hardware. This is about Amazon getting as many of its services as possible in to my living room.


Setting up the Fire TV is a breeze: once I plugged it in and put in my Wi-Fi password, it launched into a video tutorial demonstrating its many features (starring a bizarro normcore Doug Funnie character). As with its Kindle Fire tablets, Amazon preloaded my account on the Fire TV before it shipped it to me, so once the tutorial finished (you can’t skip it, I tried), all of my Amazon content was there right in front of me. Every TV show and movie I’d purchased from Instant Video, every photo I’d uploaded to Cloud Drive, all there for my consumption. (Starting next month, every song I upload to Amazon’s Cloud Player will be there too.)<br>

<h1>THE FIRE TV'S INTERFACE IS SUBDUED BUT EASY TO SEE AND CONTROL FROM THE COUCH</h1><br>
The interface will look familiar to anyone that’s used a Kindle Fire tablet: it’s a basic grid with categories on the left and content on the right. Unlike the Roku 3’s bright and colorful themes,  the Fire TV’s interface is mostly dark and understated. It’s easy to navigate and responsive thanks to the Fire TV’s powerful hardware, and most importantly, it’s easy to read from my couch. Needless to say, it’s a much better interface than anything a cable box has ever offered.

        <h1>THE FIRE TV'S INTERFACE IS SUBDUED BUT EASY TO SEE AND CONTROL FROM THE COUCH</h1><br>
The interface will look familiar to anyone that’s used a Kindle Fire tablet: it’s a basic grid with categories on the left and content on the right. Unlike the Roku 3’s bright and colorful themes,  the Fire TV’s interface is mostly dark and understated. It’s easy to navigate and responsive thanks to the Fire TV’s powerful hardware, and most importantly, it’s easy to read from my couch. Needless to say, it’s a much better interface than anything a cable box has ever offered.

</div>

<div class="social"> 
<img src="http://i.imgur.com/9PY48ir.png" width="50px" height="50px"> 
<br>  
<img src="http://i.imgur.com/U4kusEr.png" width="50px" height="50px"> 
<br>
<img src="http://i.imgur.com/Q8JpVmS.png" width="50px" height="50px"> 
</div><!-- end div social -->

</div>


</body>

CSS

    * {
    box-sizing:border-box;
    }

.maincon {
    width:670px;
    overflow: hidden;
    margin: 0 auto 0 auto;


}


.artikel {
    width:600px;
    float:left;
    padding:20px;

    font-family: "ff-tisa-web-pro";
    font-size:12pt;
  }



img {
    margin-left: 10px;
    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
    float:right;
}

.head {
    width:660px;
    height: 60px;

}

.social {

    float:left;
    width:70px;
    height:400px;
    padding-left:10px;
    padding-top:50px;

}

h1 {
  font-family: "proxima-nova";
  }

你们知道如何解决这个问题吗？这是固定位置失败的 fiddle :http://jsfiddle.net/MemCz/1/

最佳答案

将您的 CSS .social 类更新为以下内容:

.social {
    position:fixed;
    right:50px;
    width:70px;
    height:400px;
    padding-left:10px;
    padding-top:50px;
}

这将使它起作用。你有固定的位置，但是固定位置和绝对位置你可以给它一个距离屏幕边缘的距离。在这种情况下，通过使用 right:50px;，您告诉浏览器将您的社交媒体按钮呈现在屏幕右边缘 50px 处。

查看更新的 JSFiddle:http://jsfiddle.net/vAL2y/

关于html - 初学者 : How to get a fixed element to a left position (float left? ) - 包含 JSFiddle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24271502/

24 4 0
文章推荐： html - 填充父框的所有可用高度
文章推荐： ios - 将自定义 UIBarButtonItem 添加到 UINavigationBar
文章推荐： iOS:动画颜色从左到右变化
文章推荐： jquery - jQuery slider 上的箭头位置问题(幻灯片)
行者123
个人简介

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

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