gcogco10 Ответов: 2

Как сделать так, чтобы iframe внутри формы имел кратный iframe без использования тега div?

У меня есть проблема, я создал 2 iframe и хочу разделить их друг на друга, а не разделять. Любая идея, как это сделать, или я должен использовать набор фреймов для достижения такой цели. Моя логика находится ниже и застряла, но все же хочу разместить свою кнопку переключения под моим iframe(button_state).

Что я уже пробовал:

<pre>  <!---iframes for both temp, illuminance and button-state.
  --->
  <div class = "iframe-container">
  <iframe  width="650" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15">
  </iframe>
  </div>
   <br/>
  <div class = "iframe-container">
  <iframe  width="650" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15">
  </iframe>
  </div>
   <br/>
  <div class = "iframe-container">
  <iframe width="650" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15">
  </iframe>
  </div>
   <!----Toggle button for switching On/Off when is clicked.
  ---->
  <div class = "wrapper" align = "center">
  <div class="btn-group" id="toggle_event_editing">
  <button type="button" class="btn btn-danger locked_active">OFF</button>
 <button type="button" class="btn btn-success unlocked_inactive">ON</button>
</div> 
<div class="alert alert-info" id="switch_status">Switched off.</div>
  </div>
 <br/>

ZurdoDev

Я не совсем понимаю ваш вопрос; однако использование divs-отличный способ организовать и разместить элементы в макете страницы.

gcogco10

@ZurdoDev, я хочу создать два iframe внутри или бок о бок(слева и справа). Есть идеи, как этого добиться?

2 Ответов

Рейтинг:
2

tninis

привет, из тегов я вижу, что вы используете bootstrap.
вы можете использовать строки и cols, как в приведенном ниже примере.
Кроме того пожалуйста взгляните на bootstrap grid system это вам очень поможет:
Сеточная система · Bootstrap[^]


Пример:

<div class="row">
  <div class="col-md-6">
  <div class = "iframe-container">
  <iframe  width="100%" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15">
  </iframe>
  </div>
</div>
   <div class="col-md-6">
  <div class = "iframe-container">
  <iframe  width="100%" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15">
  </iframe>
  </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12"> 
    <div class="row">
     <div class="col-md-12">
      <div class = "iframe-container">
        <iframe width="100%" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15"></iframe>      
      </div>
     </div>
  </div>
    <div class="row">
     <div class="col-md-1 offset-md-6">
       <div class = "wrapper" align = "center">
        <div class="btn-group" id="toggle_event_editing">
          <button type="button" class="btn btn-danger locked_active">OFF</button>
          <button type="button" class="btn btn-success unlocked_inactive">ON</button>
        </div> 
        <div class="alert alert-info" id="switch_status">Switched off.</div>
      </div>
     </div>
  </div>
  </div>
</div>

gcogco10

Я сделал попытку, но она не увенчалась успехом. Вот моя логика, я использую последний iframe(стремясь достичь этого), так как я хочу, чтобы моя кнопка была ниже его или внутри iframe













ПРОЧЬ
ВКЛ

Выключенный.

tninis

Здравствуйте, не могли бы вы показать мне, чего именно вы хотите достичь ? Ты можешь это нарисовать ? Потому что я тестировал на codepen и кнопку где под iframes

gcogco10

Хорошо, чего я хочу добиться, так это того, чтобы мой последний iframe был ниже, чем эти два. внутри этого iframe моя кнопка переключения должна быть внутри этого iframe. Надеюсь, я все понял.

tninis

я обновил решение пожалуйста проверьте обновленный код

Рейтинг:
11

gcogco10 

<br/>
  <div class="frame-wrap">
   <iframe src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" class="frame2" frameborder="0" scrolling="no" width="100%" height="250">
   </iframe>
 <!----Toggle button for switching On/Off when is clicked.
  ---->
  <div class = "wrapper" align = "center">
  <div class="btn-group" id="toggle_event_editing">
  <button type="button" class="btn btn-danger locked_active">OFF</button>
 <button type="button" class="btn btn-success unlocked_inactive">ON</button>
</div> 
<div class="alert alert-info" id="switch_status">Switched off.</div>
  </div>
 <br/>

  .frame2 {
    display: inline-block;
    box-sizing: border-box;
}
<pre lang="HTML">

Maciej Los

Это ответ или что?

gcogco10

Да, это мое решение, в основном я хотел найти способ обойти размещение моего iframe(последнего) ниже первых двух.

tninis

просто проверьте мое обновленное решение