тег ссылки горизонтально центрирован, а фреймы показаны под

Question

Как мне нужно изменить jquery и html, чтобы отображать ссылки рядом друг с другом по центру и показывать / скрывать фреймы ниже трех ссылок?

Я искал решение с добавлением классов вместо проверки внутри div, но не нашел работающего обходного пути.

$(document).ready(function(){

  $('div.dropdown').each(function() {
    var $dropdown = $(this);

    $("a.dropdown-link", $dropdown).click(function(e) {
      e.preventDefault();
      $div = $("div.dropdown-container", $dropdown);
      $div.toggle();
      $("div.dropdown-container").not($div).hide();
      return false;
    });

});
    
  $('html').click(function(){
    $("div.dropdown-container").hide();
  });
     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
<iframe src="yahoo.de" width="100px" height="100px"></iframe>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
<iframe src="google.org" width="100px" height="100px"></iframe>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
<iframe src="globe.com" width="100px" height="100px"></iframe>
  </div>
</div>

Answer 1

Вы можете использовать flexbox подробнее здесь . Просто окружите div контейнером с классом .iframe-container и добавьте следующий css:

.iframe-container{
  display: flex;
  justify-content: center;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      <div class="iframe-container">
        <div id="dropdown-1" class="dropdown dropdown-processed">
          <a class="dropdown-link" href="#">Options</a>
          <div class="dropdown-container" style="display: none;">
        <iframe src="yahoo.de" width="100px" height="100px"></iframe>
          </div>
        </div>

        <div id="dropdown-2" class="dropdown dropdown-processed">
          <a class="dropdown-link" href="#">Options</a>
          <div class="dropdown-container" style="display: none;">
        <iframe src="google.org" width="100px" height="100px"></iframe>
          </div>
        </div>

        <div id="dropdown-3" class="dropdown dropdown-processed">
          <a class="dropdown-link" href="#">Options</a>
          <div class="dropdown-container" style="display: none;">
        <iframe src="globe.com" width="100px" height="100px"></iframe>
          </div>
        </div>
      </div>