寬度沒有設置

我有一個關於在這種情況下保證金的設置問題： 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

寬度沒有設置

回答

相關問題