列宽的总和等于父宽度,但不适合

时间:2015-09-13 23:20:19

标签: html css twitter-bootstrap

关于将设计应用到我的网站中的列宽度问题。 网站的总宽度为1024px,左/右填充为18px。尺寸为132px宽的两个外柱包围另外9个109px的柱。每列由10px的水槽分开。

design description

问题:我的所有列都不适合父import re message="b'GET / HTTP/1.1\r\nHost: localhost:8816\r\nConnection: keep-alive\r\nAccept: text/css,*/*;q=0.1\r\nUser-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36\r\nReferer: http://localhost:8816/\r\nAccept-Encoding: gzip, deflate, sdch\r\nAccept-Language: en-US,en;q=0.8\r\n\r\n'" print(message) filename1=re.search(r'/[^H]*',message).group() a="/" a=str(a) print(filename1) if filename1 == a: filename2='/Users/ankushverma/Desktop/www/index.html' print(filename2) ,所以最后一列进入下一行。

这是我的HTML:

#centralMainBlock

我的CSS:

<body>
<div id="centralMainBlock">

    <div id="leftColumn" class="exteriorColumn">
        Left col
    </div>

    <div id="contentBlock">
        <div id="menuLine">
            <div class="col-md-2 bootCol">Summary</div>
            <div class="col-md-2 bootCol">Transfer</div>
            <div class="col-md-2 bootCol">Portfolio</div>
            <div class="col-md-2 bootCol">Advice</div>
            <div class="col-md-2 bootCol">Performance</div>
            <div class="col-md-2 bootCol">Activity</div>
        </div>
        <!-- website content -->
    </div>

    <div id="rightColumn" class="exteriorColumn">
        Right col
    </div>
</div>

当我使用bootstrap时,我必须修改列之间的装订线:

body
{
    width: 1024px;
    height: 100%;
    margin: 0 auto;
}
#centralMainBlock
{
    width: 988px; /* 1024 - 2*18 */
    margin: 0 auto;

}

#centralMainBlock > div
{
    display: inline-block;
    vertical-align: top;
}
.exteriorColumn
{
    width: 132px;
    height: 100%;
}

#contentBlock 
{
    /* 6*109 + 5*10 + 2*5 
       6 central columns + 5 gutters between these + half gutter (right/left)
   */
    width: 714px; 
}

这是显示错误的JsFiddle。我添加了背景颜色。您可以扩展“结果”窗口,因为我使用了大屏幕引导程序(col-md - *)。

如果我删除最后一列8px的边距,这一个用于第一行的结尾(如预期的那样)。这8个px在哪里? ?我没有使用边框(边框发生在一个区块中)。

无论如何,谢谢你的帮助。

0 个答案:

没有答案