浮动时,不能将div放在div中

时间:2014-12-18 09:53:25

标签: html css

所以我在页面上制作链接盒,并且它们必须按2分组2.这是我到目前为止所提出的。现在我希望链接框在页面伸展时自动居中,但我仍然需要它们浮动(所以当页面足够宽时它们会跳到1行)。有没有办法用html / css做到这一点?

我发布了我的代码,以便您可以看到所有内容(不知道是否有其他显示或浮动导致问题?)



body{
    /*ozadje strani*/
    background-image:url("images/background_test.jpg");
    background-size:80%;
    background-repeat:no-repeat;
    background-position:50% 0%;

    margin-top:5%;
    /*krčenje strani*/
    min-width:49.5em;
    max-width:101em;
    
    font-family:verdana;
    color:#000000;
}
/*splošno linki*/
a:link {
    text-decoration:none;
}
a:hover {
    text-decoration:none;
    font-weight:bold;
}
a:active {
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
/*velikost celotne vsebine*/
.layout {
    width:70%;

    margin-left:15%;
    margin-right:15%;
}
.bannerlayout {
    text-align:center;
}
#ijs_logo {
    display:inline-block;
}
#headersign {
    display:inline-block;
    vertical-align:top;
    font-weight:bolder;
    font-size:200%;
}
.topmenulayout{
    text-align:center;
}
#topmenu {
    width:100%;
    display:inline-block;
    
    background-color:#330033;
    border-radius:10px;
    
    opacity:0.8;
    filter: alpha(opacity=40);
}
.menutext {
    display:inline-block;
}
#linkijs {
    float:left;
    margin-left:5%;
    
    color:#ffffff;
}
#linkeng {
    float:right;
    margin-right:5%;
    
    color:#ffffff;
}
.content{
    height:100%;
}
/*container za linkboxe*/
#linkpanel{

    
    display:inline-block;
    float:left;;
    
    width:100%;
    height:100%;

    border-radius:10px;
}
.linkboxdivider {
    margin:0 auto;
    padding:0;
    float:left;
    display:inline-block;
    width:35em;
    height:17em;

}
.linkbox{
/*linkbox positinoning*/  
    margin:2%;
    float:left;
    display:inline-block;
/*style*/
    border-radius:30px;
    background-color:#ffcc99;
    padding:1%;
    width:15em;
    height:15em;
    opacity:0.7;
    filter: alpha(opacity=40);
}
.linkboxtitle{
    font-weight:bold;
    font-size:120%;
    margin-left:5%;
}
.linkboxlink {
    color:#000000;
    margin-left:5%;
}
.footerlayout{
    text-align:center;
}
.footer {
    width:100%;
    display:inline-block;
   
    background-color:#330033;
    border-radius:10px;
    
    opacity:0.8;
    filter: alpha(opacity=40);
}
#tel{
    float:left;
    margin-left:5%;
    display:inline-block;
    
    color:#ffffff;
}
#delovnicas{
    float:right;
    margin-right:5%;
    display:inline-block;
    
    color:#ffffff;
}
/*napis pod footerjem*/
.underfooter {
    width:100%;
    padding:0;
    
    font-size:90%;
}
#copyright {
    float:left;
    margin-left:5%;
    display:inline-block;
    
    padding:0;
    margin-top:0;    
}
#adminmail {
    vertical-align:top;
    float:right;
    margin-right:5%;
    display:inline-block;
    
    padding:0;
    margin-top:0;
}
#adminmaillink{
    color:#000000;
    
    padding:0;
    margin-top:0;
}

<html>
    <head>
        <title>//</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="defsi.css"/>
    </head>
    <body>
        <table class="layout">
            <tr class="bannerlayout">
                <td>
                    <img id="logo" src="images/ijs_logo.gif" alt="IJSlogo" />
                    <p id="headersign">//</p>
                </td>    
            </tr>
            <tr class="topmenulayout">
                <td>
                    <div id="topmenu">
                        <a href="http://www.ijs.si/"><p class="menutext" id="linkijs">//</p></a>
                        <a href="indexEN.html"><p class ="menutext" id="linkeng">//</p></a>
                    </div>
                </td>
            </tr>
            <tr class="content">
                <td>
                    <div id="linkpanel">
                        <div class='linkboxdivider'>
                            <div class="linkbox" id="novosti">
                            <p class="linkboxtitle">NOVOSTI</p>
                            <a href = "http://greyhound.ijs.si:13795/Scripts/Allsi.asp"><p class="linkboxlink">e-knjige založbe Springer</p></a>
                            <a href = "http://greyhound.ijs.si:13782/Scripts/Titsi.asp"><p class="linkboxlink">nove elektronske revije</p></a>
                            <a href = "http://greyhound.ijs.si:13784/Defsi.asp"><p class="linkboxlink">novi izvodi tiskanih revij</p></a>
                            <a href = "http://www.sciencemag.org/archive"><p class="linkboxlink">Science Classic</p></a>
                            </div>
                            <div class="linkbox" id="knjižnica">
                            <p class="linkboxtitle">KNJIŽNICA</p>
                            <a href = "http://greyhound.ijs.si:13786/Defsi.asp"><p class="linkboxlink">predstavitev</p></a>
                            <a href = "http://www.cobiss.si/scripts/cobiss?ukaz=getid&amp;sblk=c&amp;lani=si&amp;bno=50108"><p class="linkboxlink">COBISS</p></a>
                            <a href = "mailto:illijs@ijs.si"><p class="linkboxlink">medknjižnična izposoja</p></a>
                            <a href = "http://splet02.izum.si/cobiss/BibPersonal.jsp?init=t"><p class="linkboxlink">bibliografije raziskovalcev</p></a>
                            </div>
                        </div>  
                        <div class='linkboxdivider'>
                            <div class="linkbox" id="čitalnica">
                            <p class="linkboxtitle">ČITALNICA</p>
                            <a href = "http://greyhound.ijs.si:13782/Scripts/Titsi.asp"><p class=linkboxlink>elektronske revije</p></a>
                            <p class="linkboxlink">CD ROM-i</p>
                            </div>
                            <div class="linkbox" id="servisi">
                            <p class="linkboxtitle">SERVISI</p>
                            <a href = "http://greyhound.ijs.si:13790/Defsi.asp"><p class=linkboxlink>splošno zanimivi</p></a>
                            <a href = "http://greyhound.ijs.si:13787/Defsi.asp"><p class=linkboxlink>samo za lokalne uporabnike</p></a>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr class="footerlayout">
                <td>
                    <div class="footer">
                        <p id="tel">// <br />//  </p>
                        <p id="delovnicas">// <br/> // </p>
                    </div>
                </td>
            </tr>
            <tr class="underfooter">
                <td>
                    <div class ="underfooter">
                        <p id="copyright">//</p>
                        <p id="adminmail">spletni mojster:<a id="adminmaillink" href = "mailto://@ijs.si"> av</a></p>
                    </div>
                </td>
            </tr> 
        </table>
    </body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

.linkboxdivider {
    margin: 0px auto;
    padding: 0px;
    float: left;  //remove
    display: inline-block;   //remove
    width: 35em;
    height: 17em;
    margin-left: auto; //add
    margin-right: auto; //add
}

您必须删除float:left display:inline-block行。 您必须添加margin-left:auto margin-right:auto;

我添加了所有代码。

<style>
body{
    /*ozadje strani*/
    background-image:url("images/background_test.jpg");
    background-size:80%;
    background-repeat:no-repeat;
    background-position:50% 0%;

    margin-top:5%;
    /*krcenje strani*/
    min-width:49.5em;
    max-width:101em;

    font-family:verdana;
    color:#000000;
}
/*splošno linki*/
a:link {
    text-decoration:none;
}
a:hover {
    text-decoration:none;
    font-weight:bold;
}
a:active {
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
/*velikost celotne vsebine*/
.layout {
    width:70%;

    margin-left:15%;
    margin-right:15%;
}
.bannerlayout {
    text-align:center;
}
#ijs_logo {
    display:inline-block;
}
#headersign {
    display:inline-block;
    vertical-align:top;
    font-weight:bolder;
    font-size:200%;
}
.topmenulayout{
    text-align:center;
}
#topmenu {
    width:100%;
    display:inline-block;

    background-color:#330033;
    border-radius:10px;

    opacity:0.8;
    filter: alpha(opacity=40);
}
.menutext {
    display:inline-block;
}
#linkijs {
    float:left;
    margin-left:5%;

    color:#ffffff;
}
#linkeng {
    float:right;
    margin-right:5%;

    color:#ffffff;
}
.content{
    height:100%;
}
/*container za linkboxe*/
#linkpanel{


    display:inline-block;
    float:left;;

    width:100%;
    height:100%;

    border-radius:10px;
}
.linkboxdivider {
    margin:0 auto;
    padding:0;

    width:100%;
    height:17em;

}
.linkbox{
/*linkbox positinoning*/  
    margin:2%;
    float:left;
    display:inline-block;
/*style*/
    border-radius:30px;
    background-color:#ffcc99;
    padding:1%;
    width:18%;
    height:15em;
    opacity:0.7;
    filter: alpha(opacity=40);
}
.linkboxtitle{
    font-weight:bold;
    font-size:120%;
    margin-left:5%;
}
.linkboxlink {
    color:#000000;
    margin-left:5%;
}
.footerlayout{
    text-align:center;
}
.footer {
    width:100%;
    display:inline-block;

    background-color:#330033;
    border-radius:10px;

    opacity:0.8;
    filter: alpha(opacity=40);
}
#tel{
    float:left;
    margin-left:5%;
    display:inline-block;

    color:#ffffff;
}
#delovnicas{
    float:right;
    margin-right:5%;
    display:inline-block;

    color:#ffffff;
}
/*napis pod footerjem*/
.underfooter {
    width:100%;
    padding:0;

    font-size:90%;
}
#copyright {
    float:left;
    margin-left:5%;
    display:inline-block;

    padding:0;
    margin-top:0;    
}
#adminmail {
    vertical-align:top;
    float:right;
    margin-right:5%;
    display:inline-block;

    padding:0;
    margin-top:0;
}
#adminmaillink{
    color:#000000;

    padding:0;
    margin-top:0;
}
</style>
<html>
    <head>
        <title>//</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="defsi.css"/>
    </head>
    <body>
        <table class="layout">
            <tr class="bannerlayout">
                <td>
                    <img id="logo" src="images/ijs_logo.gif" alt="IJSlogo" />
                    <p id="headersign">//</p>
                </td>    
            </tr>
            <tr class="topmenulayout">
                <td>
                    <div id="topmenu">
                        <a href="http://www.ijs.si/"><p class="menutext" id="linkijs">//</p></a>
                        <a href="indexEN.html"><p class ="menutext" id="linkeng">//</p></a>
                    </div>
                </td>
            </tr>
            <tr class="content">
                <td>
                    <div id="linkpanel">
                        <div class='linkboxdivider'>
                            <div class="linkbox" id="novosti">
                            <p class="linkboxtitle">NOVOSTI</p>
                            <a href = "http://greyhound.ijs.si:13795/Scripts/Allsi.asp"><p class="linkboxlink">e-knjige zalozbe Springer</p></a>
                            <a href = "http://greyhound.ijs.si:13782/Scripts/Titsi.asp"><p class="linkboxlink">nove elektronske revije</p></a>
                            <a href = "http://greyhound.ijs.si:13784/Defsi.asp"><p class="linkboxlink">novi izvodi tiskanih revij</p></a>
                            <a href = "http://www.sciencemag.org/archive"><p class="linkboxlink">Science Classic</p></a>
                            </div>
                            <div class="linkbox" id="knjiznica">
                            <p class="linkboxtitle">KNJIZNICA</p>
                            <a href = "http://greyhound.ijs.si:13786/Defsi.asp"><p class="linkboxlink">predstavitev</p></a>
                            <a href = "http://www.cobiss.si/scripts/cobiss?ukaz=getid&amp;sblk=c&amp;lani=si&amp;bno=50108"><p class="linkboxlink">COBISS</p></a>
                            <a href = "mailto:illijs@ijs.si"><p class="linkboxlink">medknjiznicna izposoja</p></a>
                            <a href = "http://splet02.izum.si/cobiss/BibPersonal.jsp?init=t"><p class="linkboxlink">bibliografije raziskovalcev</p></a>
                            </div>                        
                            <div class="linkbox" id="citalnica">
                            <p class="linkboxtitle">CITALNICA</p>
                            <a href = "http://greyhound.ijs.si:13782/Scripts/Titsi.asp"><p class=linkboxlink>elektronske revije</p></a>
                            <p class="linkboxlink">CD ROM-i</p>
                            </div>
                            <div class="linkbox" id="servisi">
                            <p class="linkboxtitle">SERVISI</p>
                            <a href = "http://greyhound.ijs.si:13790/Defsi.asp"><p class=linkboxlink>splošno zanimivi</p></a>
                            <a href = "http://greyhound.ijs.si:13787/Defsi.asp"><p class=linkboxlink>samo za lokalne uporabnike</p></a>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr class="footerlayout">
                <td>
                    <div class="footer">
                        <p id="tel">// <br />//  </p>
                        <p id="delovnicas">// <br/> // </p>
                    </div>
                </td>
            </tr>
            <tr class="underfooter">
                <td>
                    <div class ="underfooter">
                        <p id="copyright">//</p>
                        <p id="adminmail">spletni mojster:<a id="adminmaillink" href = "mailto://@ijs.si"> av</a></p>
                    </div>
                </td>
            </tr> 
        </table>
    </body>
</html>