資訊專欄INFORMATION COLUMN
摘要：原因在于的對(duì)齊問題。然后就有人推薦了一篇文章關(guān)于你需要知道的事情其中里面最后一個(gè)例子講到了如何解決元素?fù)Q行的問題。里面說用注釋可以解決換行問題，我測(cè)試了下發(fā)現(xiàn)和注釋完全沒有關(guān)系。
昨天群里有人問個(gè)問題：為什么button加了文字后，產(chǎn)生了對(duì)齊不一致的問題。
原因在于baseline的對(duì)齊問題。
然后就有人推薦了一篇文章：關(guān)于Vertical-Align你需要知道的事情
其中里面最后一個(gè)例子講到了如何解決inline元素?fù)Q行的問題。
里面說用注釋可以解決換行問題，我測(cè)試了下發(fā)現(xiàn)和注釋完全沒有關(guān)系。
?換行的原因在于div與div換行制表符產(chǎn)生的空隙，所以要避免換行的話，那就讓div和div挨著一起不要換行，或者設(shè)置容器font-size為0，因?yàn)橹票矸拇笮∈躥ont-size影響。
首先是按照它說的來(lái)，是這樣的。
DOCTYPE html>
<html>
<head>
<title>testtitle>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width:800px;
height: 300px;
border: 1px solid #ccc;
}
.box{
width: 400px;
height: 100px;
margin: 10px 20px;
border: 1px solid #ccc;
}
.half {
height:40px;
display: inline-block;
width: 50%;
vertical-align: bottom;
}
.left{
background-color: #8ab3bf;
}
.right{
background-color: #C1CD89;
}
style>
head>
<body>
<div id="container">
<div id="test1" class="box">
<div class="half left">50% widediv>
<div class="half right">50% wide... and in next linediv>
div>
<div id="test2" class="box">
<div class="half left">50% widediv>
<div class="half right">50% widediv>
div>
div>
body>
html>
結(jié)果是這樣的：
可以看到，有沒有注釋都會(huì)換行，那么我們測(cè)試下div與div挨著一起
<div id="container"> <div id="test1" class="box"> <div class="half left">50% widediv><div class="half right">50% wide... and in next linediv> div> <div id="test2" class="box"> <div class="half left">50% widediv><div class="half right">50% widediv> div> div>
結(jié)果為
可以看到當(dāng)div與div挨著一起的時(shí)候，也就是沒有了換行的制表符，因此沒有了空隙，就可以并排一行了。
此外，也可以設(shè)置父容器font-size為0也可以達(dá)到這種效果。
.box{ width: 400px; height: 100px; margin: 10px 20px; border: 1px solid #ccc; font-size: 0; } <div id="container"> <div id="test1" class="box"> <div class="half left">50% widediv> <div class="half right">50% wide... and in next linediv> div> <div id="test2" class="box"> <div class="half left">50% widediv> <div class="half right">50% widediv> div> div>
結(jié)果為
?
?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2249.html
摘要：一什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。條件注釋最初于微軟的瀏覽器中出現(xiàn)，并且直至均支持。 一、什么是瀏覽器兼容問題 所謂的瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無(wú)論用戶用什么瀏覽器來(lái)查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都...
摘要：浮動(dòng)定位的其中一種方法就是使用屬性。例如，是一個(gè)內(nèi)聯(lián)元素，它默認(rèn)的值為和值是不生效的。然而，如果我們將這個(gè)內(nèi)聯(lián)元素設(shè)置為浮動(dòng)，那么它的默認(rèn)值會(huì)變成這時(shí)候和值就生效了。包裹元素就是將浮動(dòng)元素置于父元素中，父元素作為容器會(huì)置于正常的文件流中。 CSS最大的用處之一就是可以將內(nèi)容和元素定位到任何我們想要的位置，使我們的設(shè)計(jì)具有結(jié)構(gòu)，使內(nèi)容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...
摘要：浮動(dòng)定位的其中一種方法就是使用屬性。例如，是一個(gè)內(nèi)聯(lián)元素，它默認(rèn)的值為和值是不生效的。然而，如果我們將這個(gè)內(nèi)聯(lián)元素設(shè)置為浮動(dòng)，那么它的默認(rèn)值會(huì)變成這時(shí)候和值就生效了。包裹元素就是將浮動(dòng)元素置于父元素中，父元素作為容器會(huì)置于正常的文件流中。 CSS最大的用處之一就是可以將內(nèi)容和元素定位到任何我們想要的位置，使我們的設(shè)計(jì)具有結(jié)構(gòu)，使內(nèi)容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...
摘要：先看結(jié)構(gòu)代碼在的元素之間存在的空白如圖第一種就是改變結(jié)構(gòu)結(jié)構(gòu)一這種方法接近標(biāo)簽換行格式的寫法，也更趨近閱讀。當(dāng)然有些文章介紹使用來(lái)解決，這也是跟元素的字號(hào)有極大的關(guān)系。如果元素是一個(gè)，則查找文檔內(nèi)容。如果節(jié)點(diǎn)是元素節(jié)點(diǎn)，則屬性將返回。 早上在博客中有人提了這樣一個(gè)問題：li元素inline-block橫向排列，出現(xiàn)了未知間隙，我相信大家在寫頁(yè)面的時(shí)候都遇到過這樣的情況吧。 我一般遇到這...
閱讀 790·2021-11-09 09:47
閱讀 1581·2019-08-30 15:44
閱讀 1150·2019-08-26 13:46
閱讀 2114·2019-08-26 13:41
閱讀 1279·2019-08-26 13:32
閱讀 3783·2019-08-26 10:35
閱讀 3532·2019-08-23 17:16
閱讀 463·2019-08-23 17:07
