Question

我想创建一篇包含cv的文章。文章的HTML如下所示：

<div class="bio-container">
    <div class="bio">
        <img src="images/cv-girl.jpg" border="0" alt="cv-girl" title="cv-girl" /> 
        <ul>
            <li>Position: </li>
            <li>Physics Lab</li>
        </ul>
    </div>

    <div class="bio">
        <h4>Paper blabla</h4>
        <ul>
            <li>paper 1</li>
            <li>paper 2</li>
            <li>paper 3</li>
        </ul>
    </div>

    <div class="bio">
        <h4>Interests</h4>
        <ul>
            <li>Interests 1</li>
            <li>Interests 2</li>
            <li>Interests 3</li>
            <li>Interests 4</li>
        </ul>
    </div>

    <div class="bio">
        <h4>Lessons</h4>
        <ol>
            <li><a href="www.google.com">lesson 1</a></li>
            <li><a href="www.google.com">lesson 2</a></li>
            <li><a href="www.google.com">lesson 3</a></li>
        </ol>
    </div>

    <div class="bio">
        <h4>Publishings</h4>
        <div class="public-menu">
            <a href="#" onclick="showHide('books');return false;">Books</a>
            <a href="#" onclick="showHide('magazines');return false;">Magazines</a>
            <a href="#" onclick="showHide('conf');return false;">Conferences</a>
            <a href="#" onclick="showHide('show');return false;">Shows</a>
            <a href="#" onclick="showHide('disc');return false;">Discography</a>
            <a href="#" onclick="showHide('other');return false;">Other</a>
        </div>
        <hr />

        <div id="books" class="anchor-hidden">
            <h5>Books</h5>
            <table border="0">
                <thead> 
                    <tr>
                        <th>A/A</th><th>Title</th><th>Year</th>
                    </tr>
                </thead> 
                <tbody>
                    <tr>
                        <td>[1]</td>
                        <td>C.K. Georgiadis, P. Fouliras, and A. Manitsaris, "Mobile Agent Platforms and Personalized Multimedia Services Issues", Chapter in "HANDBOOK OF RESEARCH ON MOBILE MULTIMEDIA, 2nd EDITION", I.K. Ibrahim (Ed.), Information Science Reference Inc (IGI Group), September 2008, ISBN 978-1-60566-046-2, pp. 595-611.</td>
                        <td>2008</td>
                    </tr>
                    <tr>
                        <td>[2]</td>
                        <td>S. Weerawarana, F. Curbera, et al., "Αρχιτεκτονική Πλατφόρμας Υπηρεσιών Ιστού", επιστημονική επιμέλεια ελληνικής έκδοσης: Χρήστος K. Γεωργιάδης, εκδόσεις Κλειδάριθμος, σελ. 455, ISBN 978-960-461-086-0, Αθήνα 2008.</td>
                        <td>2008</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- The rest of the divs for the links goes here -->
    </div>
</div>

CSS是：

.bio img {
    float: left;
    margin-right: 20px;
    border: 1px inset black;
}

.bio:nth-child(odd){
    background-color: #EAEAEA;
}

.public-menu a {
    margin: 5px;
}

.anchor-hidden {
    /*overflow: hidden;*/
    display: none;
}

JS功能：

function showHide(shID) {
    if(shID == "all") {
        document.getElementById("books").style.display = "block";
        document.getElementById("magazines").style.display = "block";
        document.getElementById("conf").style.display = "block";
        document.getElementById("show").style.display = "block";
        document.getElementById("disc").style.display = "block";
        document.getElementById("other").style.display = "block";
    }

    else {
        document.getElementById("books").style.display = "none";
        document.getElementById("magazines").style.display = "none";
        document.getElementById("conf").style.display = "none";
        document.getElementById("show").style.display = "none";
        document.getElementById("disc").style.display = "none";
        document.getElementById("other").style.display = "none";

        document.getElementById(shID).style.display = "block";
    }
}

我使用的模板是Ja Edenite

问题是，当我在书上点击一个标签时，会显示隐藏的div，但它不会将页脚向下推。（根据SO政策，我无法发布截图，所以......）

文章溢满了页脚。到目前为止，我已经尝试了几件事（现在尝试解决这个问题，比如7小时），我或者在这段时间之后真的很累，或者有一些我没有想到的事情。

任何想法都会受到赞赏！

Answer 1

我刚把你的代码带到我自己的页脚div中，它对我来说很好。

这是我用于页脚的内容：

<div id="footer" style="text-align:center; height:50px; background-color:#000; color:#FFF;">
    <p>Test Footer</p>
</div>

不确定您为页脚添加了什么样的样式，但如果您已将其定位为position:fixed;，那么我建议将其删除。

Answer 2

这可能是由于网站上的内容已浮动。尝试在文章下方添加以下内容：

<div class="clr"></div>

如果您正在使用一个剥离空div的编辑器，您也可以使用像bootstrap这样的clearfix：

.bio-container:after {
    clear: both;
}
.bio-container:before, .bio-container:after {
    display: table;
    content: "";
    line-height: 0;
}

希望这会有所帮助：）

Joomla文章造型

2 个答案: