jquery - 如何自动对齐存在于父 div 中的两个 div

标签 jquery html css

我在一个父 div 中有两个 div。 div 1 设置为 75% 宽度，第二个 div 设置为 25%。用户可以选择通过在我们的应用程序中使用主题来切换 div 1 和 div 2 的位置。

.docTOCDiv li.iconPage:hover {
    text-decoration: none;
}
div.docPage {
    background-color: #ffffff;
    background-image: none;
    border-color: #ffffff;
    border-style: solid;
    border-width: 0;
}
.docToggleFull {
    background-color: #002a5c;
    background-image: url("/site_assets/images/doc_style/murraystate/murraystate_banner.png");
    background-position: right top;
    background-repeat: no-repeat;
    padding-left: 0.5em;
}
div.hideTOC {
    margin-top: 1em;
}
.docTOCDiv {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    left: 0.2em;
    margin: 8em 0 0 0.2em;
    padding: 0.5em;
    position: absolute;
    top: 0;
}
h3.docPageH3 {
    border-bottom: medium none;
    color: #002a5c;
    font-size: 18px;
    font-weight: normal;
    line-height: 2em;
    margin: 0;
    padding-left: 0.5em;
}
div.docPageCorner {
    line-height: 0;
}
.docTOCDiv li.iconPage a:link, .docTOCDiv li.iconPage a:active, .docTOCDiv li.iconPage a:visited {
    color: #ffffff;
}
.docToggle {
    background-color: #002a5c;
    background-image: url("/site_assets/images/doc_style/murraystate/murraystate_banner.png");
    background-position: right top;
    background-repeat: no-repeat;
    padding-left: 18em;
}
div.docSection {
    background-color: #ffffff;
    border-color: #1e5127;
    border-style: solid;
    border-width: 0;
    margin-bottom: 1.2em;
    margin-top: 0.2em;
    padding: 0.5em;
}
.docTOCDiv li.iconSection a:link, .docTOCDiv li.iconSection a:active, .docTOCDiv li.iconSection a:visited {
    color: #ffffff;
}
div.docPageBottom {
    background-image: none;
}
.docTOCDiv ul, .docTOCDiv ul:hover {
    background: #6699cc none repeat scroll 0 0;
}
.docTOCDiv li.iconSection:hover, .docTOCDiv li.iconSection a:hover {
    color: #93b1d5;
    text-decoration: none;
}
div.docDiv {
    background-color: #002a5c;
    background-image: none;
}
div.docPageBottomCorner {
    background-image: none;
}
.docTOCDiv ul:hover {
    background-image: none;
}
div.editPage {
    margin: 1em;
}
.docTOCDiv ul.sectionLevel, .docTOCDiv ul.sectionLevel:hover {
    background: #6699cc none repeat scroll 0 0;
    color: #93b1d5;
}
div.docSection p {
    color: #000000;
    font-size: 11px;
}
div.pagination {
    padding: 1em;
}
h2.docDivH2 {
    background-color: #ffcc00;
    border: 3px solid #fff;
    color: #000033;
    font-size: 21px;
    font-weight: bold;
    line-height: 120%;
    margin: 0;
    padding: 0.5em;
}
.docTOCDiv div.pageTOCBottom {
    border-color: #3b6289;
    line-height: 0;
}
div.submitDivLeft {
    border: medium none;
    margin-top: 6em;
}
div.ifLeftTOC {
    float: left;
    margin-top: -0.4em;
}
.docTOCDiv h5 {
    background-color: #6699cc;
    border: medium none;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    margin: 1.1em 0 0;
    padding: 0.5em;
}
<div id="doc" class="contentDiv" style="width: 105.4%;">
    <!-- Document Section starts here -->

    <div class="sectionDiv docToggle" id="docToggleDiv">
        <!-- Doc Table of Content starts -->

        <div id="docTOC" class="docTOCDiv" style="height: 440px;">
            <div class="submitDivLeftFloat clearfix">
                <div id="toggle-toc" style="margin-top: 0px;">
                    <a title="Hide Page List" class="iconButton hide">Hide</a>
                </div>
            </div>

            <h5>Page List</h5>
            <div id="allPages" class="allPages" style="height: 315px; overflow-y: auto; overflow-x: hidden;">
            
            <div class="">
            <ul id="sections-toc-ul-47631849">
              <li class="iconPage">
                <a href="/doc/10672558/47631849" class="pageTitle_47631849">DYO Page</a></li>
              
            </ul>
            </div>
            
        </div>
         
        <table><tbody><tr>
        <td><div class="button" id="add_page" style="margin-top: 10px;"><a tabindex="0" title="Add new page" class="iconOnlyButton add">&nbsp;</a></div></td>
        <td><div class="button" id="manage_pages" style="margin-left: 5px; margin-top: 10px;"><a tabindex="0" class="iconButton edit">Manage Pages</a></div></td>
        </tr></tbody></table>
          
        </div>
        <!-- Doc Table of Content ends -->

        <div id="pagesArea">

            <div class="button pull-right" id="manage_content_button_47631849">
                <a tabindex="0" class="iconButton edit">Manage Content</a>
            </div>
            <div class="floatLeft">
            <h2 class="docDivH2 pageTitle_47631849">DYO Page</h2>
            </div>

            <a tabindex="0" id="pageTitleEdit_47631849">edit title</a>
            <div id="page_body_47631849" class="docPage clear">
                <div class="docPageSider">
                    <div class="grayMessageDiv">
                        <div class="noSectionsMessage">
                        Currently, there is no content on this page.To add content to this page, select a content type:<div class="newSectionDropdown_47631849 button dropdown" id=""></div>							<a class="iconOnlyButton add" title="Add new content">&nbsp;</a>
                    </div>
                    </div>
                </div>
            </div>
    </div>
    <!-- Document Section ends here -->
    </div>

由于每个主题都有很多 css 文件，我们无法更改或更新每个 css 属性。我们无法准确地垂直对齐 div。所以想到使用 Jquery 并设置 div 的高度。 #docToggleDiv 是主 div。 #docTOC 应始终为 #docToggleDiv 的高度。

这是我迄今为止使用 Jquery 尝试过的方法:

<script>
jQuery.noConflict();
jQuery(document).ready(function() {

    var sectionDivHeight = jQuery('#docToggleDiv').height() ;
    var docTOCDivHeight = jQuery('#docTOC').height() ;

    // since doc view page doesn't has the right side quick links, we can increase the size of the container a little more.
    // The right side edge of the container is inline with the author or creator name displayed on the right top corner
    jQuery('.contentDiv').css("width", "105.4%");

    if ( sectionDivHeight < docTOCDivHeight ) {

        // in rest all test cases, the table of contents list height should adhere to the height of the section div
        // This is required when the TOC is on the left side and the hide button is way off the top border
        jQuery('#docTOC').css("height", sectionDivHeight );
        jQuery('#toggle-toc').css("margin-top", "0px");

        // this is to make the TOC plus signs appear within the viewable area in the TOC
        //jQuery('#docTOC').find('li.iconPage').css("margin", "0 0.7em 0 0");

        // The 125 which I have set is an average value after checking all the docs in the ticket RT119492
        jQuery('#allPages').css("height", sectionDivHeight - 125 );
        jQuery('#allPages').css("overflow-y", "auto");
        jQuery('#allPages').css("overflow-x", "hidden");

        // The add page and Manage Pages button are touching the Scrollbar
        jQuery('#add_page').css("margin-top", "10px");
        jQuery('#manage_pages').css("margin-left", "5px");
        jQuery('#manage_pages').css("margin-top", "10px");

        // this is to make the TOC plus signs appear within the viewable area in the TOC
        jQuery('#allPages').find('div.TOCcollapsed').css("width", "14em");

    }
    }); // END of Jquery Ready Block
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

在这里添加一些图片。

enter image description here

enter image description here

enter image description here

最佳答案

只需要获取左侧元素的top位置，然后将其作为top值应用到右侧元素上即可:

jQuery(document).ready(function() {

  var docTOCtop = $('#docTOC').position().top;
  
  $('#docToggleDiv').css({"top": docTOCtop});

 });
.container {
  height: 600px;
  background-color: Tomato;
  position: relative;
  
}

#docTOC {
  position: absolute;
  top: 100px;
  left: 0;
  width: 25%;
  height: 500px;
  background-color: wheat;
}

#docToggleDiv {
  position: absolute;
  right: 0;
  width: 75%;
  height: 500px;
  background-color: aquamarine;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="docTOC"></div>
  <div id="docToggleDiv"></div>
</div>

关于jquery - 如何自动对齐存在于父 div 中的两个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45814042/

上一篇：html - 占位符中的图像具有自己的背景

下一篇：html - 移动菜单按钮内的条形图不会出现在垂直中心

相关文章：

javascript - 你能用 jquery 获取继承的元素类吗？

javascript - Ajax 和 PHP 将数据返回到表格单元格

html - png8 和 png24 有什么区别

html - 如何在 gwt. 中对面板宽度应用滑动效果？

javascript - 如何设置显示:block and transition opacity at the same time in React?

成功函数后javascript返回数据

javascript - 如何防止按钮出现悬停

javascript - JQuery:每 5 秒更改 <div> 的内容

html - 如何在 CSS 文件中更改 safari 和 opera 的字体大小而不是 chrome。

html - Bootstrap css，如何减小 "th"和 "td"的宽度？

©2024 IT工具网  联系我们