1

在这种情况下，我对边距设置有疑问：http: //jsfiddle.net/s38Ar/6/

如您所见，两列之间有垂直边距。我想知道它的宽度以及为什么它看起来像这样，因为我想自己精确地设置它。

将 float:left 设置为 .column 是不可接受的，因为 theme2 应该与 theme4 对齐（如您所见）

CSS

    body{background-color:#0d5697;}
.selborder{border:#d7e51c;}
p{font-size:1em;color:white;}
#header{height: 50px;background-color: #666;margin-bottom: 10px;}

h1{font-size:1.5em;color:#dae645;}


@media screen and (max-width: 800px) and (min-width: 448px) {
    #galeria{width:100%;height: 100%;margin:0 auto;}
    #gutter{background-color:white;display:inline-block;width:3%;height:100%;margin-bottom:10px;float:left;display: inline-block;}
    .column2{height:100%;width:94%;float:left;}
    .column{width:49%;background-color:red;vertical-align:bottom;display:inline-block;}
    .work{vertical-align:bottom;}
    .komorka{width:100%;height:100%;}
    .cl2{clear:both;}
}

HTML

    <body>
    <div id="header"></div>
    <div id="galeria">
        <div id="gutter"></div>
        <div class="column2" id="m_col">
            <div class="column" id="col1"><div class="work" id="work1">
                <h1 class="komorka"> theme1 more more more more more more more more more more more theme</h1><img id="paint" class="komorka" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column" id="col2"><div class="work" id="work2">
                <h1 class="komorka">theme 2</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column cl2" id="col3"><div class="work" id="work3">
                <h1 class="komorka">theme 3</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column" id="col4"><div class="work" id="work4">
                <h1 class="komorka">theme 4</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
            <div class="column" id="col5"><div class="work" id="work5">
                <h1 class="komorka">theme 5</h1><img class="komorka" id="paint" src="projekty/asd.png"></img><p class="komorka">1But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
            </div></div>
        </div>
    </div>
    <div id="footer"></div>
</body>
4

2 回答 2

1

这是由于inline-block显示，它将两列都转换为内联元素（如 aspan或 an a）。

您的解决方案是手动“删除”左列的右边距，如下所示（只是前两列的示例）：

#col1 {
    margin-right: -4px;
}

另一种解决方案（不太实用，但有效）是删除divHTML 代码中 s之间的空格，这使得列非常适合，但动态代码可能很难获得。

我为前两列做了这个例子：http: //jsfiddle.net/jackJoe/s38Ar/7/

于 2013-09-27T10:13:29.350 回答
0

这是您需要的

小提琴

css中的变化如下

添加

.column:nth-child(even){
float:right;
width:50% !important;
}

.column:nth-child(odd){
    float:left;
        width:50% !important;
}

宽度将是 50%，以减少间隙。它不是 MARGIN :) 现在您可以将单独的边距放入 div :)

于 2013-09-27T13:51:11.493 回答