宽度没有设置

我有一个关于在这种情况下保证金的设置问题： http://jsfiddle.net/s38Ar/6/宽度没有设置

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

设置浮动：左.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>

来源

2013-09-27 Daniel

这是由于到inline-block显示屏，它将两列变为行内元素（如span或a）。

你的情况的解决方案是为左栏手动“去除”右边缘，这样的（只是一个例子的前两列）：

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

另一种解决方案（不太实用，但作品），是要删除HTML代码中的div之间的空格，这使得列很适合，但动态代码可能会很复杂。

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

来源

2013-09-27 10:13:29 jackJoe

这不适合每一个地方。作为主要原因仍然未知。 :) – Anobik

@Anobik什么？原因很简单，正如我所说的，“inline-block”将它转换为内联元素，并在HTML代码中包含空格，这就是原因。另外，OP要求“theme2应该与主题4一致”，float解决方案不会那样做（就像你的回答）。我只做了一个案例，OP将不得不做第3列和第5列。 – jackJoe

@jackJoe margin-right：-4px似乎没有用，因为当您的浏览器中的默认字体大小设置为16px以外时，边距也会发生变化，无论如何，我将边距设置为-0.25em，并且它适用于不同的默认字体在Firefox上的大小，但我不确定在其他浏览器或字体类型上是否可以。在第二个问题中，一切似乎都没有问题，当我在div中使用JavaScript时，你会说这可能会很复杂吗？ – Daniel

下面是你需要什么

fiddle

CSS中的变化如下

添加

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

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

宽度将减少50％，以缩小差距。这不是一个毛边：）现在你可以把个人利润分区:)

来源

2013-09-27 13:51:11 Anobik

在您的方法theme2 div不与底部对齐到theme4，这对我很重要 – Daniel

宽度没有设置

回答

相关问题