Question

我有一些集装箱,他们的子女只能是绝对的/相对的位置。如何确定集装箱的高度,使其子女在集装箱内生活?

Here s the code:

<><><><>>><>>>>><>>>>>>

<section id="foo">
  <header>Foo</header>

  <article>
    <div class="one"></div>
    <div class="two"></div>
  </article>
</section>    
    
<div style="clear:both">Clear won t do.</div>
<!-- I want to have a gap between sections here -->
    
<section id="bar">
  <header>bar</header>
  
  <article>
    <div class="one"></div>

    <div></div>

    <div class="two"></div>
  </article>
</section>

CSS

article {
  position: relative;
}
    
.one {
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}
    
.two {
  position: absolute;
  top: 10px;
  right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

这里是一片 j。我希望“禁运”案文在4平方米之间出现,而不是放在后面。

http://jsfiddle.net/Ht9Qy/

Any easy fixes?

Note that I don t know the height of these children, and I can t set height: xxx for containers.

Answer 1

<>2022 UPDATE。答案将近10年。当撰写时,我们确实有像软体或格里德这样的布局技术(这些技术是黑暗、黑板/fun时期)。

令人欣慰的是,Jöcker swer显示,如何与Grid公司达成这一安排。如果你不支持遗留的浏览器,那就不是这样!

www.un.org/spanish/ecosoc

如果我理解你试图正确做些什么,那么我就不认为,在保持儿童绝对地位的同时,安全局会这样做。

绝对定位的要素完全从文件流通中删除,因此其范围不能改变父母的层面。

如果你really在把子女保留为时,必须实现这一影响:绝对的<<>代码>,你可以通过在被绝对安置的儿童到达后找到其身高的身高位来这样做,并以此确定父母的身高。

或者,仅仅使用<代码>float:左/float:right和让子女在证件流通中保持同样地位的作用的边际,可以使用<代码>overflow:隐藏的在父母(或其他任何明确的固定技术)上使其身高至子女。

article {
  position: relative;
  overflow: hidden;
}
    
.one {
  position: relative;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  background: red;
  width: 30px;
  height: 30px;
}
    
.two {
  position: relative;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  background: blue;
  width: 30px;
  height: 30px;
}

Answer 2

Here is my workaround,
In your example you can add a third element with "same styles" of .one & .two elements, but without the absolute position and with hidden visibility:

<><><><>>><>>>>><>>>>>>

<article>
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
</article>

<>CSS

.three{
    height: 30px;
    z-index: -1;
    visibility: hidden;
    width:0!important; /* if you got unnecessary horizontal scroll*/
}

Answer 3

可以通过电网做到这一点:

article {
  display: grid;
}
    
.one {
  grid-area: 1 / 1 / 2 / 2;
}
    
.two {
  grid-area: 1 / 1 / 2 / 2;
}

Answer 4

这是一个迟到的答案,但通过审视源码,我注意到,在录像完全筛选时,“me-tain-ful”类添加到“me-tain”元素中。因此,有可能改变这一类的束缚。

.mejs-container.mejs-container-fullscreen {
    // This rule applies only to the container when in fullscreen
    padding-top: 57%;
}

另外,如果你希望利用CSS,将媒体内容视频流利,以下是Chris Coyier的trick子:。

请将此补充给你的特别安全局:

.mejs-container {
    width: 100% !important;
    height: auto !important;
    padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
    width: 100% !important;
    height: 100% !important;
}
.mejs-mediaelement video {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

我希望它能够提供帮助。

Answer 5

这种布局问题现在可以通过弹性箱解决,避免需要了解高点或控制绝对位置或浮标。任择议定书的主要问题是,如何让父母控制不知名的身高子女,他们想在某种布局内这样做。将母集装箱的高度定在“适当毗连”上;使用“显示:弹性”和“合理性-连续性:空间与空间之间”生成了一节/栏版图,我认为,欧佩斯正在试图制造。

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="main one"></div>
        <div class="main two"></div>
    </article>
</section>    

<div style="clear:both">Clear won t do.</div>

<section id="bar">
    <header>bar</header>
    <article>
        <div class="main one"></div><div></div>
        <div class="main two"></div>
    </article>
</section> 

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
    justify-content: space-between;
    background: whitesmoke;
}
article div { 
    background: yellow;     
    margin:20px;
    width: 30px;
    height: 30px;
    }

.one {
    background: red;
}

.two {
    background: blue;
}

I modified the OP s fiddle: http://jsfiddle.net/taL4s9fj/

css-tricks on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 6

article {
    position: relative;
   
}

//clear the float

article::after{
  content:   ;
  clear: both;
  
}

.one {
    position: relative;
    float:left
    margin-top: 10px;
    margin-left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: relative;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

Answer 7

Set element with style position:absolute top: 0, botton: 0

友情链接