Четыре фрейма, два рядом - PullRequest
Новая
       1

Четыре фрейма, два рядом

0 голосов
/ 01 мая 2018

У меня есть четыре фрейма. Я хочу, чтобы они отображались следующим образом: 

1 | 2
3 | 4

Это мой код: 

<!doctype html>

<head>
  <style type="text/css">
    .box {
      float: left;
      margin-right: 20px;
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<html>
<p>
  <div class="box">
    <iframe src="webgl_sphereWithEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
  </div>
  <div class="box">
    <iframe src="webgl_hopftorus1.html" frameborder="0" scrolling="no" width="100%" height="512" align="right">
    </iframe>
  </div>
</p>

<p>
  <div class="box">
    <iframe src="webgl_sphereWithSlopedEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
  </div>
  <div class="box">
    <iframe src="webgl_hopftorus2.html" frameborder="0" scrolling="no" width="100%" height="512" align="right">
    </iframe>
  </div>
</p>

</html>

<p> не имеет ожидаемого эффекта. Я получаю четыре iframe на одной строке, бок о бок (каждая картинка является iframe):

enter image description here

Как "сломаться" после двух фреймов?

Ответы [ 3 ]

0 голосов
/ 01 мая 2018

Самый простой способ - заменить стиль float: left на display: inline-block. Делая это таким образом, вы также можете избавиться от класса .clear. float делает то, что он избавляется от любого надлежащего «взлома» и заставляет все элементы «плавать», независимо от того, принадлежат они им или нет.

Кроме того, я бы предложил изменить теги <p> на <div>, поскольку они в любом случае действуют как разделители.

Отредактированный CSS: 

<style type="text/css">
    .box {
        display: inline-block;
        margin-right: 20px;
    }
</style>
0 голосов
/ 01 мая 2018

Как указано Скрытый Гоббс в разделе комментариев, добавление класса clear вместе с третьим классом box поможет, как: 

<div class="box clear">
    <iframe src="webgl_sphereWithSlopedEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
</div>

Кроме того, вы также можете сделать это, используя класс box для родительского элемента div, где присутствует iframe, например: 

<div class="box">
  <div>
    <iframe src="webgl_sphereWithEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
  </div>
  <div>
    <iframe src="webgl_hopftorus1.html" frameborder="0" scrolling="no" width="100%" height="512" align="right">
    </iframe>
  </div>
</div>

<div class="box">
  <div>
    <iframe src="webgl_sphereWithSlopedEquator.html" frameborder="0" scrolling="no" width="100%" height="512" align="left">
    </iframe>
  </div>
  <div>
    <iframe src="webgl_hopftorus2.html" frameborder="0" scrolling="no" width="100%" height="512" align="right">
    </iframe>
  </div>
</div>

Надеюсь, это поможет.

0 голосов
/ 01 мая 2018

Использование Float и Width

код CSS 

.box {
    float:left;
    width: 50%;
}
iframe {
    width:100%;
}

HTML код 

<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>
<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>
<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>
<div class="box">
    <iframe src="https://www.google.com"></iframe>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...