3

我在编写网站时遇到了一个我无法理解的问题/事情。

我有两列，使用float: left(and margin: 0, padding: 0) 列里面是块

当块为空时没有问题，我什至可以在不使用<p>标签的情况下添加文本。但是当我<p>在块中添加标签时，父列会添加一些填充。

但是，当我不使用float:left（所以只有一列）时，我可以使用<p>块内的标签而无需向父元素添加填充。

当然，我可以想出某种修复方法，但我也想了解为什么会发生这种情况，如果有人知道如何，如何恢复这种奇怪的行为。

我有一个现场问题演示在这里工作。

<style>
#html, body{
       margin: 0;
       padding: 0;
       height: 100%;
       font-size: 100%;
}

#pagewrap {
       padding: 0 20px;
       width: 960px;
       height: 100%;
       margin: 0 auto;
       background: #CCC;
}

.test {
       width: 100%;
    height: 100px;
       margin: 0;
       padding: 0;
       background: #00F;
       clear: both;
}

.column {
       width: 480px;
       margin: 0;
       padding: 0;
       float: left;
       background: #0F0;
}

.column2 {
       width: 480px;
       margin: 0;
       padding: 0;
       background: #0F0;
}

.lefty {
    min-height: 100px;
       width: 470px;
       margin: 0 10px 10px 0;
       padding: 0;
       background: #999;
}

.righty {
       min-height: 130px;
       width: 470px;
       margin: 0 0 10px 10px;
       padding: 0;
       background: #999;
}

</style>

<div id="pagewrap">

    <div class="test"></div>

    <div class="column">

        <div class="lefty">
        <p></p>
        </div>

        <div class="lefty">
            <p></p>
        </div>

    </div>

    <div class="column">    

        <div class="righty">
     
        </div>

        <div class="righty">

        </div>

    </div>

    <div class="test"></div>

<div class="column2">

        <div class="lefty">
    
        </div>

        <div class="lefty">

        </div>

    </div>

    <div class="test"></div>

<div class="column2">

        <div class="lefty">
        <p></p>
        </div>

        <div class="lefty">
        <p></p>
        </div>

    </div>

    <div class="test"></div>

</div>
4

1 回答 1

1

而不是使用浮动：这是非常hacky/有跨浏览器问题（我相信），您应该考虑使用 inline-block 设置元素的样式

即，对于您想要连续拥有的元素：

#wrap {
width:100%;
}

#main_container {
     margin:0 auto;
     width:1000px;
}

#column {
    display:inline-block;
    *display:inline;zoom:1; //ie7 hack, does not affect other browsers
    width:200px; height:200px; background:#aaa;
}

#content {
    display:inline-block;
    *display:inline;zoom:1;
    width:600px; height:600px; background:red;
}

HTML

<div id="wrap">
    <div id="main_container">
        <div id="column">list of items</div>
        <div id="content">paragraph content</div>
    </div>

</div>

并且不要忘记在 CSS 文件的开头放置一个CSS重置

    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
    }
于 2013-10-16T22:58:11.510 回答