元素在文档中的定位不一致 [英] Inconsistent positioning of elements across document

查看：130
本文介绍了元素在文档中的定位不一致的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在文件的这个页面上，我需要在页面上乱排乱的图片。我的方法是通过 top 和和百分比值来调整每个。图形元素表现异常。 ＃num1 根本不响应，而＃num4 需要极值才能运行，但＃num5 做得很好。所有6 #num 具有相同的属性。 1-3在< div id =divAclass =row> ，而4-6是< div id = divBclass =row>



这里是我的CodePen的链接。





如果您对这些图很难，或者如果你有替代/改进的方法这样做，请让我知道。



此外，一旦这些安排，我计划添加脚本将.on（mouseover）推非悬浮图远离悬浮元件。如果有一种方法来编写html / css，这将是适合由脚本处理，奖金积分为你。

解决方案

我在这里创建了不改变框和图像格式的示例。
所以，第一个图像将仍然具有相同的格式：3：2。




  • （topleft corner），宽度也是从文档大小计算。

  • 框边框创建正确的框格式。


  • image-size创建图像的正确格式

  • > img使用对象适配，这与所有浏览器不兼容。如果你正在寻找的东西，什么将工作在每个现代浏览器，你可以使用背景CSS样式。还有很好的解决方法，如果你还需要用于SEO的img标签（查找解决方案2）：是否有等效于background-size：cover和包含图片元素？ 



 ＃boxes-wrapper {position：relative; width：100％; padding-top：63.12％;}＃box1，＃box2，＃box3，＃box4，＃box5，＃box6 {position：absolute; -webkit-box-sizing：border-box; -moz-box-sizing：border-box; box-sizing：border-box; height：0;}。box-border {position：absolute; top：0; left：0; width：100％; -webkit-box-shadow：0 0 0 2px＃5f2325; -moz-box-shadow：0 0 0 2px＃5f2325; -ms-box-shadow：0 0 0 2px＃5f2325; -o-box-shadow：0 0 0 2px＃5f2325; box-shadow：0 0 0 2px＃5f2325;}。image-wrapper {position：absolute; height：0;}。image-size {position：absolute; top：0; left：0; width：100％; height：0;}。image-size img {position：absolute; top：0; left：0; width：100％;高度：100％; object-fit：cover;}＃box1 {top：21.48％;左：4.88％; width：24.54％;}＃box1 .box-border {padding-top：67.96％;}＃box1 .image-wrapper {bottom：-2.5％;左：-3.05％ width：92.52％;}＃box1 .image-size {padding-top：66.46％; -webkit-transform：translateY（-100％）; -moz-transform：translateY（-100％）; -ms-transform：translateY（-100％）; -o-transform：translateY（-100％）; transform：translateY（-100％）;}＃box2 {top：31.36％;左：36％; width：19％;}＃box2 .box-border {padding-top：67.8％;}＃box2 .image-wrapper {top：-7.85％;左：-10.68％; width：92.52％;}＃box2 .image-size {padding-top：66.54％;}＃box4 {top：54.67％;左：1.42％; width：24.61％;}＃box4 .box-border {padding-top：67.77％;}＃box4 .image-wrapper {bottom：-11.38％;左：10.74％; width：66.94％;}＃box4 .image-size {padding-top：104.12％; -webkit-transform：translateY（-100％）; -moz-transform：translateY（-100％）; -ms-transform：translateY（-100％）; -o-transform：translateY（-100％）; transform：translateY（-100％）;}  

  div id =boxes-wrapper> < div id =box1> < div class =box-border> < div class =image-wrapper> < div class =image-size> < img src =http://dummyimage.com/450x300/eee/333333.png/> < / div> < / div> < / div> < / div> < div id =box2> < div class =box-border> < div class =image-wrapper> < div class =image-size> < img src =http://dummyimage.com/450x300/eee/333333.png/> < / div> < / div> < / div> < / div> < div id =box4> < div class =box-border> < div class =image-wrapper> < div class =image-size> < img src =http://dummyimage.com/450x469/eee/333333.png/> < / div> < / div> < / div> < / div>< / div>



box-wrapper，因为第二行的问题。


On this page of the document, I need the images to be arranged messily on the page. My approach is to adjust each one via top and left percentage values. The figure elements are behaving strangely. #num1 does not respond to top at all, while #num4 requires extreme values to function, but #num5 is doing just fine. All 6 #num have the same properties. 1-3 are under <div id="divA" class="row"> while 4-6 are under <div id="divB" class="row">

Here is a link to my CodePen .

http://codepen.io/WallyNally/pen/QEZKrV

Here is the mockup I am working toward.

If you have insight as to why these figures are being difficult, or if you have alternative/improved ways of doing this, please let me know.

Also- once these are arranged, I plan to add script will .on(mouseover) push the non-hoveredfigures away from the hovered element. If there is a way of writing the html/css that would be amenable to being handled by script, bonus points for you.

解决方案

I created example here which do not change format of boxes and images. So, first image will have still the same format: 3:2.

  • box(es) are positioned absolutely to document (topleft corner), width is also calculated from document size.
  • box-border(s) create right format of boxes.
  • image-wrapper(s) create position for images - and it should be positioned over the hidden corner.
  • image-size(s) create right format of images
  • img use object-fit, which is not compatible with all browsers. If you are looking for for something, what will work on every modern browser, you can use background css style. There is also nice workaround, if you also need img tag for SEO (find Solution 2): Is there an equivalent to background-size: cover and contain for image elements? 

#boxes-wrapper {
  position: relative;
  width: 100%;
  padding-top: 63.12%;
}
#box1,
#box2,
#box3,
#box4,
#box5,
#box6 {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 0;
}
.box-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-box-shadow: 0 0 0 2px #5f2325;
  -moz-box-shadow: 0 0 0 2px #5f2325;
  -ms-box-shadow: 0 0 0 2px #5f2325;
  -o-box-shadow: 0 0 0 2px #5f2325;
  box-shadow: 0 0 0 2px #5f2325;
}
.image-wrapper {
  position: absolute;
  height: 0;
}
.image-size {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}
.image-size img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#box1 {
  top: 21.48%;
  left: 4.88%;
  width: 24.54%;
}
#box1 .box-border {
  padding-top: 67.96%;
}
#box1 .image-wrapper {
  bottom: -2.5%;
  left: -3.05%;
  width: 92.52%;
}
#box1 .image-size {
  padding-top: 66.46%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
#box2 {
  top: 31.36%;
  left: 36%;
  width: 19%;
}
#box2 .box-border {
  padding-top: 67.8%;
}
#box2 .image-wrapper {
  top: -7.85%;
  left: -10.68%;
  width: 92.52%;
}
#box2 .image-size {
  padding-top: 66.54%;
}
#box4 {
  top: 54.67%;
  left: 1.42%;
  width: 24.61%;
}
#box4 .box-border {
  padding-top: 67.77%;
}
#box4 .image-wrapper {
  bottom: -11.38%;
  left: 10.74%;
  width: 66.94%;
}
#box4 .image-size {
  padding-top: 104.12%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}

<div id="boxes-wrapper">
  <div id="box1">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x300/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
  <div id="box2">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x300/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
  <div id="box4">
    <div class="box-border">
      <div class="image-wrapper">
        <div class="image-size">
          <img src="http://dummyimage.com/450x469/eee/333333.png" />
        </div>
      </div>
    </div>
  </div>
</div>

EDIT: Added boxes-wrapper, because of problem with 2nd row.

这篇关于元素在文档中的定位不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆