将2格并排放置在嵌入iframe的方形容器中 [英] Positioning 2 div side by side in a squared container embed in an iframe

问题描述

问题

我遇到CSS问题，当我想将2个div并排放置在一个嵌入iframe平方的容器中时。

• iframe具有固定的高度和宽度，并且是正方形。然而，它的尺寸是在javascript中生成的，所以我不会提前知道它们。
  
• 容器有一个宽度：100％;第一个div的宽度可变：它包含一个动态选择的图像，其中 height：100％;
; ，这个图像的高度/宽度比率是可变的（但从来没有< 1）。

• 我希望第二个div取得剩余宽度

我正在处理容器及其子元素的CSS。

我的问题是我无法让第二个div取所有剩余的空间。

情况

 。== iframe ==================。 
 |。======容器=========。| 
 || | || 
 || | || 
 || 1st div |第二|| 
 || | div || 
 || | || 
 || | || 
 || | || 
 || | || 
 || | || 
 |。========================。| 
。==========================。 
（请设想iframe和容器是平方的:)）
  

我的结果 h1>

在阅读StackOverflow的大量答案后，我明白我必须在我的div中添加 display：inline-block; 所以他们会并排，并且效果很好。我也成功地管理了div的高度，但我无法让第二个div占据所有剩余的空间。

我为我所创建的简化jsfiddle完成：

• 我为body指定了一个大小来模仿iframe的行为。


• 和身体大小只是例子。
  

http://jsfiddle.net/e5whkna9/

正如您在小提琴上所看到的那样：

• 黑色图片（和第一个div）占据它应该占用的空间。 黄色div（第二个）好的高度，但它并不占用所有剩余的宽度。


• 粉红色div（容器）并不完全被我的第一个和第二个div所覆盖。

从我发现的情况来看，如果没有一个具有定义宽度的元素，就不可能获得所有剩余空间。我希望我错过了一些东西，因为我不知道javascript运行之前iframe的宽度，我想避免使用javascript设置div的尺寸。

我在找什么

我正在寻找一个解决方案或指向一个网站的指针，以帮助我理解和解决这个问题：让第二个div适应到其余的空间。

感谢您的帮助。 只需从你的边div中取出显示内联块即可。

  .side {
 height：100％; 
} 
 .first {
 float：left; 
背景颜色：红色; 
} 
 .second {
 background-color：yellow; 
} 
  

DEMO

I'm facing a CSS problem when I want to position 2 divs side by side in a container embed in a squared iframe.

The problem

• The iframe has a fixed height and width and is a square. However, its dimensions are generated in javascript so I don't know them in advance.
• The container has a width:100%; height: 100%;.
• The first div has a variable width: it contains a dynamically selected image with a height: 100%; and the ratio height/width of this image is variable (but is never < 1).
• I want the second div to take the remaining width of the container.

I'm working on the CSS of the container and its subelements.

My problem is that I can't make the second div take all the remaining space.

The situation

.==iframe==================.
|.======container=========.|
||                 |      ||
||                 |      ||
||      1st div    | 2nd  ||
||                 | div  ||
||                 |      ||
||                 |      ||
||                 |      ||
||                 |      ||
||                 |      ||
|.========================.|
.==========================.
(please, imagine that iframe and container are squared :))

My results

After reading lots of answers on StackOverflow, I understood that I have to add display: inline-block; to my divs so that they would be side by side and it works well. I also succeeded in managing the height of the divs but I can't make the second div take all the remaining space.

I created a simplified jsfiddle for what I've done:

• I specified a size for the body to mimic the iframe behaviour.
• The image and the body size are just examples.

http://jsfiddle.net/e5whkna9/

As you can see on the fiddle:

• The black image (and the first div) takes the space it is supposed to.
• The yellow div (the second one) has a good height but it doesn't take all the remaining width.
• The pink div (the container) is not totally covered by my first and second divs.

From what I found, it is not really possible to take "all the remaining space" without an element with a defined width. I hope that I missed something because I don't know the width of the iframe before my javascript runs and I would like to avoid setting the dimensions of my divs with javascript.

What I'm looking for

I'm looking for a solution or a pointer to a website that will help me understand and solve this problem: making the second div adapt to the remaining space.

Thanks for your help.

解决方案

Just take out the display inline block from your side div.

  .side {
    height: 100%;
  }
  .first {
    float: left;
    background-color: red;
  }
  .second {
    background-color: yellow;
  }

DEMO

这篇关于将2格并排放置在嵌入iframe的方形容器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！