我有一个简单的网格,我正在测试.
我决定从float中更改一些东西:left to display:属性选择器中的inline-block [class * =’col-].
我想知道为什么当使用float时:左边有足够的空间用于col-9并且一切正常但是,当使用display:inline-block时,元素会下降到下一行.
* { box-sizing: border-box; } .header { border: 1px solid red; padding: 15px; } .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} [class*='col-'] { display: inline-block; padding-top: 15px; border: 1px solid red; }
<div class='header'> <h1>China</h1> </div> <div class='row'> <div class='col-3'> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class='col-9'> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts,the old town and the modern city.</p> <p>Resize the browser window to see how the content respond to the resizing.</p> </div> </div>
解决方法
<div class='header'> <h1>China</h1> </div> <div class='row'> <div class='col-3'> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div><!-- --><div class='col-9'> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts,the old town and the modern city.</p> <p>Resize the browser window to see how the content respond to the resizing.</p> </div> </div>
小黑客,尝试这些<! - - >它忽略了空白
编辑:如果你想删除标题的微小差距:
.col-9 { vertical-align: top; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。