我遇到了基本CSS的問題。容器在有圖像時移動

<html> 
<head> 
<style> 
    <!-- * { 
    box-sizing: border-box; 
    } --> 

    div { 
     width: 50%; 
     margin: auto; 
    } 

    .cardBox { 
     display: inline-block; 
     border: solid 1px black; 
     height: 102px; 
     width: 68px; 
     margin: 100px 0px 0px 0px; 
     padding: 0px; 
    } 

    span img { 
     height: 100%; 
     width: 100%; 
    } 
</style> 
</head> 
<body> 
    <div> 
     <span class="cardBox" id="box1"><img src="h4.png"></span> 
     <span class="cardBox" id="box2"><img src="h4.png"></span> 
     <span class="cardBox" id="box3"><img src="h4.png"></span> 
     <span class="cardBox" id="box4"></span> 
     <span class="cardBox" id="box5"></span> 
    </div> 
</body> 
</html>

Chrome和FF中的結果相同。我試圖設置圖像高度/寬度以匹配量程卡盒，我也嘗試了不到100％。我也試過auto。這一切都會導致容器跨度的各種移動。圖像本身是99x66px，以下是它的一個副本：我遇到了基本CSS的問題。容器在有圖像時移動

另一個問題我已經是爲什麼他們的跨度之間的差距？

來源

2017-09-27 erv

你是什麼意思「移動」？他們（跨度）打破第二線？ –

剪切並粘貼代碼，您將看到。他們向下移動一個或幾個像素。 – erv

inline-block有一些問題。將其更改爲inline-flex並且完美無缺。

以下是摘錄。

div { 
 
    width: 50%; 
 
    margin: auto; 
 
} 
 

 
.cardBox { 
 
    display: inline-flex; 
 
    border: solid 1px black; 
 
    height: 102px; 
 
    width: 68px; 
 
    margin: 100px 0px 0px 0px; 
 
    padding: 0px; 
 
} 
 

 
span img { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div> 
 
    <span class="cardBox" id="box1"><img src="https://i.stack.imgur.com/1MfOn.png"></span> 
 
    <span class="cardBox" id="box2"><img src="https://i.stack.imgur.com/1MfOn.png"></span> 
 
    <span class="cardBox" id="box3"><img src="https://i.stack.imgur.com/1MfOn.png"></span> 
 
    <span class="cardBox" id="box4"></span> 
 
    <span class="cardBox" id="box5"></span> 
 
</div>

來源

2017-09-27 04:14:52

乾杯，它排序。 – erv

任何想法爲什麼箱子之間有空隙？在我的實際應用程序中，我在多個框之間拖動圖像，然後單擊一個按鈕將它們全部移動到左側，以便卡片之間沒有空框。將它們堆疊到左邊涉及.removeChild（）和.appendChild（）。在我做了這個操作之後，無論是有卡還是現在都有卡的盒子之間的差距消失了。當我檢查CSS時，拆散的圖像和容器跨度以及附加了圖像的跨度都具有完全相同的計算CSS值。 – erv

這不是一個錯誤。它是'inline-block'，'inline'和'inline-flex'中的一個特性。瀏覽器給空間看起來不錯。由於它是兩個不同的標籤，瀏覽器將其與空間分隔開來，就像瀏覽器用新行分隔'blocks'一樣。如果你想刪除空間，看看這個 - https://stackoverflow.com/questions/16678929/display-inline-block-what-is-that-space 更好地給'font-size：0'到容器 –

，只需添加display: block在跨度（代碼如下所示）的IMG。
，第二個，display: inline-block創建價值margin-right = 4PX（我不記得這是什麼原因，也許以後需要google一下），所以有兩個辦法解決它

使用float: left代替的display: inline-block
或者添加margin-right: -4px到cardBox

<!-- * { 
 
box-sizing: border-box; 
 
} --> 
 

 
div { 
 
    width: 50%; 
 
    margin: auto; 
 
} 
 

 
.cardBox { 
 
    /*display: inline-block;*/ 
 
    border: solid 1px black; 
 
    height: 102px; 
 
    width: 68px; 
 
    margin: 100px 0px 0px 0px; 
 
    padding: 0px; 
 
    float: left; 
 
} 
 

 
span img { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
}

<div> 
 
     <span class="cardBox" id="box1"><img src="http://www.placehold.it/99x66"></span> 
 
     <span class="cardBox" id="box2"></span> 
 
     <span class="cardBox" id="box3"><img src="http://www.placehold.it/99x66"></span> 
 
     <span class="cardBox" id="box4"></span> 
 
     <span class="cardBox" id="box5"></span> 
 
    </div>

來源

2017-09-27 04:15:11

我遇到了基本CSS的問題。容器在有圖像時移動

回答

相關問題