Question

祝大家新年快乐，

我有一个问题，我无法回答。。我有12个div设置在4对面3向下布局。我只是编写了一个附件到方框5，但滚动文本位于页面的底部，我迷失了，因为如何让它在方框5中排队（门票待定）。我的css技能缺乏，可以使用一些帮助

这是我能够使用inspect元素捕获的代码。

    { inline style
        position: relative;
        overflow: hidden;
    }

    #pscroller1 {
        width: 370px;
        height: 120px;
        border: 1px solid black;
        padding: 5px;
        background-color: lightyellow;
    }

    //code from CSS file
    body {
    background-color: #d0e4fe;
    font-family: 'HP Simplified', Arial, Verdana, Helvetica, Sans-serif;
    }
    p#lastRun{
    font-family: Garamond, 'Times New Roman', Georgia, serif;
    font-variant: small-caps;
    //font-weight: bold;
    font-size:1.5em;
    text-align:center;
    background-color: black;
    color: white;
    }

    h1 {
    color: orange;
    text-align: center;
    }
    a {color:#7FFFD4;
    }

    #mHeader, #mHeader2{
    text-align: center;
    font: Georgia, Times, serif;
    font-size: small;
    //font-weight: bold;
    }

    /* squares configuration */

     #squareBox {
    margin-left: auto;
    margin-right: auto;
    width: 1568px;
    height: 700px;
    //border: 2px solid #73AD21;
    //border-radius: 10px;
    //background: url(paper.gif);
    background-color: tan;
    }
    #square1, #square2, #square3, #square4, #square5, #square6, #square7,               #square8, #square9, #square10, #square 11, #square12{
    background-color: WhiteSmoke;
    width: 386px;
    height: 203px;
    outline-style: solid;
    outline-width: 1px;
    outline-color: green;
    margin-left: 5px;
    text-align: center;
    }
    #square1{
    float: left;
    margin-top: -15px;
    }
    #square2{
    float: left;
    margin-top: -15px;
    }
    #square3{
    float: left;
    margin-top: -15px;
    }
    #square4{
    float: left;
    margin-top: -15px;
    }
    #square5{
    float: left;
    margin-top: 10px;
    }
    #square6{
    float: left;
    margin-top: 10px;
    }
    #square7{
    float: left;
    margin-top: 10px;
    }
    #square8{
    float: left;
    margin-top: 10px;
    }
    #square9{
    float: left;
    margin-top: 10px;

    }
    #square10{
    float: left;
    margin-top: 10px;
   }
   #square11{
    float: left;
    margin-top: 10px;
    }
    #square12{
    float: left;
    margin-top: 10px;

    }
    .sqHeader{
    font-weight: bold;
    font-variant: small-caps;
    text-align: center;
    }

    /* Table configuration */

    th{
    font-size: small;
    font-variant:small-caps;
    background-color: Wheat;
   }
   table, td, th{
    margin: 1em; border-collapse: collapse;
    border: 1px solid black;
    padding: .15em; 
    margin-top: 2px;
    font-size: 100%;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    }
    tbody tr:nth-child(even) {
    background-color: #F8F8F8 ;
    }
    tbody tr:nth-child(odd) {
    background-color: #99FFCC;
    }
     tbody tr:hover {
    background-color: #c9f;
    }

    #dataContainter, #rightNavBar, #leftNavBar{
    height: 580px;
    outline-style: solid;
    outline-width: 1px;
    outline-color: green;
    }
    #leftNavBar , #rightNavBar {
    width: 146px;
    background-color: light-gray;
    font-size: 74%;
    }
    #leftNavBar {
    float: left;
    }
    #rightNavBar {
    float: right;
    }
     #filterButton{
    margin-left: auto;
    margin-right: auto;
    }

.statusGray {
    background-color: gray;
    }

    .statusRed {
    background-color: red;
    color: white;
    font-weight: bold;
    text-decoration: blink;
    }
    .statusYellow{
    background-color: yellow;
    color: black;
    font-weight: bold;
    }
    .statusGreen{
    background-color: green;
    color: white;
    font-weight: bold;
    }
    .statusBlue{
    background-color: blue;
    color: white;
    font-weight: bold;
    }
    .regionRed {
    background-color: #FF6600;
    }


     #displayResults  tr:hover {
    background-color: #FFFF00;
    }
    #customers tr.alt td {
    color: #EAF2D3;
    background-color: #000000;
    };
    input:focus {
    background-color: yellow;
    }
    button:hover {
    background-color: blue;
    color: white

    }
    .dEntry:focus, .qSearch:focus {
   background-color: #99FFFF;
   }
    .dEntry, .data {
   font-family: 'HP Simplified', Arial, Verdana, Helvetica, Sans-serif;
   //font-weight: bold;
   //font-size: 80%;
   //color: blue;
    }
    /*****************************************************
     * generic styling for ALS elements: outer container
     ******************************************************/

    /*Example CSS for the two demo scrollers*/

    #pscroller1{
    width: 370px;
    height: 120px;
    border: 1px solid black;
    padding: 5px;
    background-color: lightyellow;
    margin-bottom: 50px;
    }

    #pscroller2{
    width: 700px;
    height: 20px;
    border: 1px solid black;
    padding: 3px;

    }

    #pscroller2 a{
    text-decoration: none;
    }


    .someclass{ //class to apply to your scroller(s) if desired
    }

    // code from html file
    <body>
        <div id="squareBox">

        <div id="square1">
            <span class="sqHeader">  Ticket Monitor</span>
            <table id="A3">
                <th>Response</th>
                <th>Longest-Queued</th>
                <th>Status</th>
                <th>#</th>
                <tbody id="a3Data"></tbody>
            </table>
        </div>
        <div id="square2">
            <span class="sqHeader"> Unclaimed Jobs Monitor</span>
            <table id="xerox">
                <th>Response</th>
                <th>Longest-Queued</th>
                <th>Status</th>
                <th>#</th>
                <tbody id="xeroxData"></tbody>
            </table>
        </div>
        <div id="square3">
            <span class="sqHeader">Monitor</span>
            <table id="d3">
                <th>Response</th>
                <th>Longest-Queued</th>
                <th>Status</th>
                <th>#</th>

                <tbody id="Data3"></tbody>
            </table>
        </div>
        <div id="square4">
            <span class="sqHeader"> 2Hr Monitored by Marques (CA)-</span>
            <table id="d4">
                <th>Response</th>
                <th>Longest-UnTouched Ticket</th>
                <th>Status</th>
                <th>#</th>
                <tbody id="kaiserData"></tbody>
            </table>
        </div>
        <div id="square5">
            <span class="sqHeader">C 1-Hour Callback Monitor</span>
            <table id="d5">
                <th>Minutes</th>
                <th>Longest-Queued</th>
                <th>Status</th>
                <th>#</th>
                <tbody id="cdwHpgData"></tbody>
            </table>
        </div>
        <div id="square6">
            <span class="sqHeader">Tickets Pending Processing</span>
            <table id="d6">
                <th>Response</th>
                <th>Longest-Queued</th>
                <th>Status</th>
                <th>#</th>
                <tbody id="pscroller1"></tbody> 
            </table>
        </div>
        <div id="square7">
            <span class="sqHeader"> Monitor</span>
            <table id="d7">
                <th>Response</th>
                <th>Longest-Queued</th>
                <th>Status</th>
                <th>#</th>
                <tbody id="Data7"></tbody>
            </table>
        </div>
        <div id="square8">
            <span class="sqHeader">EDI Shared Mail Box Monitor</span>
            <table id="d8">
                <th>Response</th>
                <th>Longest-Queued</th>
                <th>Status</th>
                <th>#</th>
                <tbody id="Data8"></tbody>
            </table>
        </div>
        <div id="square9">
            <span class="sqHeader">Multi-Trips /  Aged Monitor</span>
            <table id="d9">
                <th>Response</th>
                <th>Longest-Queued</th>
                <th>Status</th>
                <th>#</th>
                <tbody id="Data9"></tbody>
            </table>
        </div>
        <div id="square10">
            <span class="sqHeader">#10 Monitor</span>
            <table id="d10">
                <th>Response</th>
                <th>Longest-Queued</th>
                <th>Status</th>
                <th>#</th>
                <tbody id="Data7"></tbody>
            </table>
        </div>
        <div id="square11">
            <span class="sqHeader">#11 Monitor</span>
            <table id="d11">
                <th>Response</th>
                <th>Longest-Queued</th>
                <th>Status</th>
                <th>#</th>
                <tbody id="Data8"></tbody>
            </table>
        </div>
        <div id="square12">
            <span class="sqHeader">#12 Monitor</span>
            <table id="d12">
                <th>Response</th>
                <th>Longest-Queued</th>
                <th>Status</th>
                <th>#</th>

            </table>
        </div>
    </div>
    </body>

滚动文本在正确的方块/

0 个答案: