如何将 DIV 组与页面上的其他 div 对齐

Question

我接管了一堆 TIBCO Spotfire [2] 模板。基于其中之一，我们收到了创建非常相似的东西的请求。

不幸的是，我在修改代码时遇到了问题，所以每个元素都完美地垂直对齐。 "source" 代码没有问题，因为需要处理的标签较少。

目前看起来是这样的：预期的行为是有标签，与旁边的不可用图像和文本位于同一行。

我试过 HTML/CSS 代码，但由于我不是这方面的专家（我可以做基础知识），所以我来这里是为了寻找有用的灵魂。

$(".topBar").css({
  "float": "bottom",
  "background-color": "#003DAF",
  "height": "100%",
  "font-family": "Segoe UI Light"
});

$(".btnGroup").css({
  "width": "90%",
  "margin-left": "2%",
  "display": "inline-block"
});

$("h3").css({
  "font-family": "Segoe UI Light",
  "font-size": "12px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "left",
  "margin-top": "1em",
  "margin-bottom": "0.5em",
  "margin-left": "0",
  "margin-right": "0"
});
$("h4").css({
  "font-family": "Segoe UI Light",
  "font-size": "12px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#000000",
  "text-align": "left",
  "margin-top": "0",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$("h5").css({
  "font-family": "Segoe UI Light",
  "font-size": "13px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "left",
  "margin-top": "0.5em",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$("h6").css({
  "font-family": "Segoe UI Light",
  "font-size": "13px",
  "font-style": "normal",
  "font-weight": "bold",
  "color": "#ffffff",
  "text-align": "right",
  "margin-top": "0.5em",
  "margin-bottom": "0",
  "margin-left": "0",
  "margin-right": "0"
});

$(".hiddenButtons").css({
  "display": "none"
});

$(".logo").css({
  "float": "left"
});

$('.main-button-group').css({
  'display': '-webkit-flex',
  'margin': '0 0 1rem',
  'margin-bottom': '0px',
  'color': '#fff',
  'text-decoration': 'none'
});

$('.main-button-group .button-group').css({
  'display': 'inline-block',
  'position': 'relative',
  '-webkit-flex': '1',
  '-webkit-align-items': 'center',
  '-ms-flex-align': 'center',
  '-webkit-justify-content': 'center',
  '-ms-flex-pack': 'center',
  'max-width': '100em',
  'padding': '0.786em 0',
  'font-family': 'Segoe UI Light',
  'font-size': '0.7rem',
  'font-weight': '600',
  'text-align': 'center',
  'color': '#fff',
  'background-color': '#003daf',
  'letter-spacing': '1px',
  'cursor': 'pointer',
  'transition': 'background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out',
  '-webkit-appearance': 'none',
  '-moz-appearance': 'none',
  '-webkit-user-select': 'none',
  '-moz-user-select': 'none',
  '-ms-user-select': 'none',
  'user-select': 'none',
  '-webkit-touch-callout': 'none',
  '-webkit-tap-highlight-color': 'transparent',
  '-webkit-transform': 'translate3d(0, 0, 0)',
  'transform': 'translate3d(0, 0, 0)',
  'overflow': 'hidden'
});

$('.active').css({
  'background-color': '#09f'
});

$(".button-group").hover(function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
}, function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#003daf'
  });
});

$(".active").hover(function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
}, function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
});

$(".button-group").focus(function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#09f'
  });
}, function() {
  $(this).css({
    'border-color': '#09f',
    'background-color': '#003daf'
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<DIV class=hiddenButtons>
</DIV>
<!-- Navigation bar -->
<DIV class=topBar>
  <DIV class=logo>
    <IMG style="HEIGHT: 50px; MARGIN: 5px;" src="3309c8c106fc4624bd0939a1e78e45b8.png">
  </DIV>
  <DIV style="display:inline-block;; width:90%">
    <DIV style='float:left; width:100%'>
      <DIV style='float:left; width:8%; '>
        <H3>First Line
          <br/> Second Line
          <br/> Third Line</H3>
      </DIV>
    </DIV>
    <DIV class=btnGroup>
      <DIV class=main-button-group>
        <div id="tab1" class="button-group">Tab1</div>
        <div id="tab2" class="button-group active">Tab2</div>
        <div id="tab3" class="button-group">Tab3</div>
        <div id="tab4" class="button-group">Tab4</div>
        <div id="tab5" class="button-group">Tab5</div>
        <div id="tab6" class="button-group">Tab6</div>
        <div id="tab7" class="button-group">Tab7</div>
        <div id="tab8" class="button-group">Tab8</div>
        <div id="tab9" class="button-group">Tab9</div>
        <div id="tab10" class="button-group">Tab10</div>
        <div id="tab11" class="button-group">Tab11</div>
      </DIV>
    </DIV>
    <DIV style="FLOAT: left;  width:13%">
      <H5>Tab2</H5>
    </DIV>
  </DIV>
</DIV>

注意：代码可能一团糟，因为我仍在努力清理它。

[2] 允许使用 HTML/CSS/JS/JQuery/等的 BI 报告工具。在里面

Answer 1

请在此处查看更新 fiddle https://jsfiddle.net/jefac65b/1/

删除 div 的宽度并添加 flex

<DIV style="display:flex;; width:90%">
    <DIV style='float:left;'>
      <DIV style='float:left;'>
        <H3>First Line
          <BR> Second Line
          <BR> Third Line</H3>
      </DIV>
    </DIV>

将选项卡与左侧菜单居中对齐https://jsfiddle.net/oyt4fz9g/

$('.main-button-group').css({
  'display': '-webkit-flex',
  'margin': '0 0 1rem',
  'margin-bottom': '0px',
  'color': '#fff',
  'text-decoration': 'none',
   'height': '100%',
    'align-items': 'center'
});

如何将 DIV 组与页面上的其他 div 对齐

How to align DIV group with other divs on a page

jquery

html

css

spotfire