Question

我的网页里面有一张桌子和一个div。我希望我添加到页面末尾的表格与div（其中有子菜单）对齐。如何用一般方法解决这个问题？

<!DOCTYPE html>
<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script>
    $(function(){

       //Hide all the sub menus
       $('.sub-menu').hide();

       $("li:has(ul)").click(function(){
          //Find the child ul and slideToggle
          $(this).children("ul").slideToggle();
       });
    });

    </script>
    <title>Gestione Esercizi</title>

CSS：

<style>
    body { background-color:#ffffff; }
    div.ex {
        height:250px;
        width:150px;
        padding:10px;
        border:1px solid gray;
        margin:0px;
    }
    input {
        padding: .5em;
        color: #ffffff;
        text-shadow: 1px 1px 1px #000;
        border: solid thin #882d13;
        -webkit-border-radius: .7em;
        -moz-border-radius: .7em;
        border-radius: .7em;
        -webkit-box-shadow: 2px 2px 3px #999;
        box-shadow: 2px 2px 2px #bbb;
        background-color: #ce401c;
        background-image: -webkit-gradient(linear, left top, left bottom,  from(#e9ede8), to(#ce401c), color-stop(0.4, #8c1b0b));
    }
</style>
</head>

HTML：

<body onload="window.resizeTo(600,600)">
    <div id="header" style="background-color:#ffffff;">
        <div style="position:absolute; bottom:0; right:0; width: 20x; height: 20x;   background-image: url(default_app_logo.png)">
        </div>
        <input type="button" value="Pianifica Allenamento" onclick="location.href='index.html';"/>
        <input type="button" value="Statistiche" onclick="location.href='index.html';"/>
        <input type="button" value="Presenze" onclick="location.href='index.html';"/>
        <input type="button" value="Varie Sez.SFW" onclick="location.href='index.html';"/>
    </div>
    <div class="ex">
        <ul>
            <li><a href="#">Categoria1</a></li>
            <li><a href="#">Categoria2</a>
                <ul class="sub-menu">
                    <li><a href="#">Esercizio1</a></li>
                    <li><a href="#">Esercizio2</a></li>
                </ul>
            </li>
            <li><a href="#">Categoria3</a></li>
            <li><a href="#">Categoria4</a>
                <ul class="sub-menu">
                    <li><a href="#">Esercizio1</a></li>
                    <li><a href="#">Esercizio2</a></li>
                </ul>
            </li>
            <li><a href="#">Categoria5</a></li>
        </ul>
    </div>
    <table border="1" >
        <tr>
            <td rowspan="2"> Nome Esercizio </td>
            <td> Obiettivo 1:
            <td> Obiettivo <br>
                tattico:
            <td> Durata: </td>
            </td>
        </tr>
        <tr>
            <td> Obiettivo 2: <br>
            <td> Obiettivo Coordinato: <br>
            <td> Tempo Effettivo: </td>
            </td>
        </tr>
        <tr>
            <td> Numero giocatori:<br>
                Materiale:<br>
                Descrizione: <br>
            </td>
            <td colspan="3" align="center"> IMMAGINE DA INSERIRE </td>
        </tr>
        </tr>

        </td>

        <tr>
            <td colspan="5" align="center"> NOTE </td>
        </tr>
    </table>
</body>
</html>

Answer 1

现在定义您的div .ex和table display inline-block

就像这样

.ex, table{display:inline-block;vertical-align:top;}

<强> Demo

= - ============ 第二种方法

现在定义a class并添加您的表定义css display inline-block;

就像这样

<table class="display">

<强>的CSS

 .ex, .display{display:inline-block;vertical-align:top;}

Answer 2

我假设你必须用div包裹你的表并将css应用到float:left，并且你.ex div申请float:left css检查这个小提琴{{3} }

css代码

div.ex {
    height:250px;
    width:150px;
    padding:10px;
    border:1px solid gray;
    margin:0px;
    float:left;
}
.tablewrap{
    float:left;
}

我还注意到你的表格代码不正确所以用下面的代码替换它

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
    <td> Nome Esercizio </td>
    <td> 
        <table  border="1" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td>Obiettivo 1:</td>
                <td>Obiettivo <br>  tattico:</td>
                <td>Durata:</td>
            </tr>
            <tr>
                <td>Obiettivo 2:</td>
                <td>Obiettivo Coordinato:</td>
                <td>Tempo Effettivo: </td>
            </tr>
        </table>
    </td>
</tr>

<tr>
    <td> Numero giocatori:<br>
        Materiale:<br>
        Descrizione: <br>
    </td>
    <td align="center"> IMMAGINE DA INSERIRE </td>
</tr>
<tr>
    <td colspan="2" align="center"> NOTE </td>
</tr>

更新小提琴

http://jsfiddle.net/sarfarazdesigner/JVtgT/

将表与div对齐

2 个答案: