CSS - 股利不遠離另一個DIV

我是一個新手的CSS分開，也許你笑我的問題......CSS - 股利不遠離另一個DIV

我有2倍主要的DIV（「topinfo」和「NAVIGAT」），我需要他們一個接一個地保持分離，但由於某種原因他們沒有。在小提琴

下面是HTML代碼：

<div id="topinfo"> 
    <div id="infowin"> 
    <div id="computer"> 
     <b>Computer:</b> 123456789(192.168.560.000) 
     <img src="http://i.imgur.com/Y1CJmSa.png" id="more"/> 
    </div> 
    </div> 
    <div id="statbtn"> 
    <a href="stats.htm" target="_blank"> 
     <img src="http://i.imgur.com/rh4XEOQ.png" id="bstats"> 
    </a> 
    </div> 
</div> 

<div class="navigat"> 
    <a href="" class="navbtn">&laquo; First</a> 
    <a href="" class="navbtn">&laquo; Prior</a> 
    <select class="navsel" onchange="self.location.href=options[selectedIndex].value"> 
    <option selected="selected">Page 001</option> 
    <option value="pag002.htm">Page 002</option> 
    <option value="pag003.htm">Page 003</option> 
    <option value="pag004.htm">Page 004</option> 
    <option value="pag005.htm">Page 005</option> 
    </select> 
    <a href="" class="navbtn">Next &raquo;</a> 
    <a href="" class="navbtn">Last &raquo;</a> 
</div>

這裏是CSS代碼：

#topinfo { 
    width: 420px; 
    margin: 16px auto 4px auto; 
} 
#topinfo #infowin { 
    float: left; 
    width: 380px; 
    border: 1px dotted #292929; 
    border-radius: 4px; 
    background-color: #FFFFE8; 
} 
#topinfo #infowin #computer { 
    padding: 6px; 
    font-family: Verdana, Tahoma, Helvetica; 
    font-size: 10pt; 
    text-align: center; 
} 
#topinfo #statbtn { 
    float: right; 
    width:32px; 
    height:32px; 
    border: 0; 
} 

.navigat { 
    width: 600px; 
    margin: 18px auto 14px auto; 
    font-family: Tahoma, Verdana, Helvetica; 
    text-align: center; 
} 
.navigat a.navbtn { 
    display: inline-block; 
    width:70px; 
    padding: 3px 3px 4px 3px; 
    margin: 3px; 
    font-size: 9pt; 
    color: #FFFFFF; 
    text-align: center; 
    text-decoration: none; 
    background-color: #1D63C8; 
    border-radius: 10px; 
    cursor: pointer; 
} 
.navigat select.navsel { 
    display: inline-block; 
    width:100px; 
    padding:3px; 
    margin: 3px; 
    font-size: 9pt; 
    line-height: 1; 
    cursor: pointer; 
}

這裏是我的了：

這裏是我真正需要的：

感謝您的幫助！

來源

2016-02-21 Guybrush

這是因爲你的浮動，您可以在HTML "topinfo"與clear:both之間"navigat「

添加empty div解決這個問題：

<div id="topinfo"> 
    <div id="infowin"> 
    <div id="computer"> 
     <b>Computer:</b> 123456789(192.168.560.000) 
     <img src="http://i.imgur.com/Y1CJmSa.png" id="more"/> 
    </div> 
    </div> 
    <div id="statbtn"> 
    <a href="stats.htm" target="_blank"> 
     <img src="http://i.imgur.com/rh4XEOQ.png" id="bstats"> 
    </a> 
    </div> 
</div> 
<div class="clear"></div> 
<div class="navigat"> 
    <a href="" class="navbtn">&laquo; First</a> 
    <a href="" class="navbtn">&laquo; Prior</a> 
    <select class="navsel" onchange="self.location.href=options[selectedIndex].value"> 
    <option selected="selected">Page 001</option> 
    <option value="pag002.htm">Page 002</option> 
    <option value="pag003.htm">Page 003</option> 
    <option value="pag004.htm">Page 004</option> 
    <option value="pag005.htm">Page 005</option> 
    </select> 
    <a href="" class="navbtn">Next &raquo;</a> 
    <a href="" class="navbtn">Last &raquo;</a> 
</div>

CSS：

.clear 
{ 
clear:both; 
}

DEMO

來源

2016-02-21 02:15:08 Pbk1303

謝謝你的詳細解答！ – Guybrush

這是因爲您用來對齊的#topinfo而發生的floats。

你可以做的是使內部爲display:inline-block。因此，這將是這樣的..

#topinfo #infowin { 
    display:inline-block 
    width: 380px; 
    border: 1px dotted #292929; 
    border-radius: 4px; 
    background-color: #FFFFE8; 
} 

#topinfo #statbtn { 
    display:inline-block; 
    width:32px; 
    height:32px; 
    border: 0; 
    vertical-align: bottom; 
}

如果你想使用浮點數你可以.navigat類使用clear:both。

來源

2016-02-21 02:06:27

好吧，我會用浮標和清除它們....謝謝！ – Guybrush

當您到達.navigat時，您需要清除上面的浮標，然後添加一些填充以獲得所需的間距。

.navigat { 
    clear: both; 
    padding-top: 18px; 
}

推薦閱讀：克里斯Coyier，All About Floats

來源

2016-02-21 02:06:44 denmch

好的，欠妥的！謝謝！ – Guybrush

CSS - 股利不遠離另一個DIV

回答

相關問題