圖像將不排成一行

-1

我有3個圖像具有懸停屬性，並將作爲我網站上另一頁的超鏈接。但是，我不知道如何將3張圖像放在同一行上。這裏是代碼a jsFiddle page。圖像將不排成一行

HTML：

<div class="view view-sixth" style="margin-bottom:30px"> 
    <img src="champions/mode/ashe.jpg"> 
    <div class="mask"> 
    <h2>1</h2> 
    <p>1</p> 
     <a href="http://www.google.com" class="info" target="_blank">Google</a> 
    </div> 
</div> 

<div class="view view-sixth" style="margin-bottom:30px"> 
    <img src="champions/mode/garen.jpg"> 
    <div class="mask"> 
    <h2>2</h2> 
    <p>2</p> 
     <a href="http://www.google.com" class="info" target="_blank">Google</a> 
    </div> 
</div> 


<div class="view view-sixth" style="margin-bottom:30px"> 
    <img src="champions/mode/ryze.jpg"> 
    <div class="mask"> 
    <h2>3</h2> 
    <p>3</p> 
      <a href="http://www.google.com" class="info" target="_blank">Google</a> 
    </div> 
</div>

CSS：

.view-sixth img { 
    -webkit-transition: all 0.4s ease-in-out 0.5s; 
    -moz-transition: all 0.4s ease-in-out 0.5s; 
    -o-transition: all 0.4s ease-in-out 0.5s; 
    -ms-transition: all 0.4s ease-in-out 0.5s; 
    transition: all 0.4s ease-in-out 0.5s; 

} 
.view-sixth .mask { 
    background: rgba(146,96,91,0.5); 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    -webkit-transition: all 0.2s ease-in 0.2s; 
    -moz-transition: all 0.2s ease-in 0.2s; 
    -o-transition: all 0.2s ease-in 0.2s; 
    -ms-transition: all 0.2s ease-in 0.2s; 
    transition: all 0.2s ease-in 0.2s; 

} 
.view-sixth h2 { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    background: transparent; 
    margin: 20px 40px 0px 40px; 
    -webkit-transform: scale(10); 
    -moz-transform: scale(10); 
    -o-transform: scale(10); 
    -ms-transform: scale(10); 
    transform: scale(10); 
    -webkit-transition: all 0.3s ease-in-out 0.1s; 
    -moz-transition: all 0.3s ease-in-out 0.1s; 
    -o-transition: all 0.3s ease-in-out 0.1s; 
    -ms-transition: all 0.3s ease-in-out 0.1s; 
    transition: all 0.3s ease-in-out 0.1s; 

} 
.view-sixth p { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    -webkit-transform: scale(10); 
    -moz-transform: scale(10); 
    -o-transform: scale(10); 
    -ms-transform: scale(10); 
    transform: scale(10); 
    -webkit-transition: all 0.3s ease-in-out 0.2s; 
    -moz-transition: all 0.3s ease-in-out 0.2s; 
    -o-transition: all 0.3s ease-in-out 0.2s; 
    -ms-transition: all 0.3s ease-in-out 0.2s; 
    transition: all 0.3s ease-in-out 0.2s; 

} 
.view-sixth a.info { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    -webkit-transform: translateY(100px); 
    -moz-transform: translateY(100px); 
    -o-transform: translateY(100px); 
    -ms-transform: translateY(100px); 
    transform: translateY(100px); 
    -webkit-transition: all 0.3s ease-in-out 0.1s; 
    -moz-transition: all 0.3s ease-in-out 0.1s; 
    -o-transition: all 0.3s ease-in-out 0.1s; 
    -ms-transition: all 0.3s ease-in-out 0.1s; 
    transition: all 0.3s ease-in-out 0.1s; 

} 
.view-sixth:hover .mask { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    transition-delay: 0s; 


} 
.view-sixth:hover img { 
    -webkit-transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -o-transition-delay: 0s; 
    -ms-transition-delay: 0s; 
    transition-delay: 0s; 


} 
.view-sixth:hover h2 { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -o-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    -webkit-transition-delay: 0.1s; 
    -moz-transition-delay: 0.1s; 
    -o-transition-delay: 0.1s; 
    -ms-transition-delay: 0.1s; 
    transition-delay: 0.1s; 

} 
.view-sixth:hover p { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -o-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    -webkit-transition-delay: 0.2s; 
    -moz-transition-delay: 0.2s; 
    -o-transition-delay: 0.2s; 
    -ms-transition-delay: 0.2s; 
    transition-delay: 0.2s; 

} 
.view-sixth:hover a.info { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
    -webkit-transform: translateY(0px); 
    -moz-transform: translateY(0px); 
    -o-transform: translateY(0px); 
    -ms-transform: translateY(0px); 
    transform: translateY(0px); 
    -webkit-transition-delay: 0.3s; 
    -moz-transition-delay: 0.3s; 
    -o-transition-delay: 0.3s; 
    -ms-transition-delay: 0.3s; 
    transition-delay: 0.3s; 

} 

.view { 
    width: 260px; 
    height: 390px; 
    border: solid purple; 
    position: relative; 
    text-align: center; 
    box-shadow: 1px 1px 2px purple; 
    cursor: default; 


} 
.view .mask,.view .content { 
    width: 260px; 
    height: 390px; 
    position: absolute; 
     background: rgba(0, 0, 0, 0.7); 
    overflow: hidden; 
    top: 0; 
    left: 0; 

} 
.view img { 
    display: block; 
    position: relative; 

} 
.view h2 { 
    text-transform: uppercase; 
    color: white; 
    text-align: center; 
    position: relative; 
    font-family: Candara; 
    font-size: 20px; 
    padding: 30px; 
} 
.view p { 
    font-family: Candara, serif; 
    font-size: 20px; 
    position: relative; 
    color: white; 
    padding: 10px 20px 20px; 
    text-align: center; 
} 
.view a.info { 
    display: inline-block; 
    text-decoration: none; 
    padding: 7px 14px; 
    background: white; 
    color: black; 
    text-transform: uppercase; 
    -webkit-box-shadow: 0 0 1px #000; 
    -moz-box-shadow: 0 0 1px #000; 
    box-shadow: 0 0 1px #000; 
    border-radius: 5px; 
} 
.view a.info:hover { 
    -webkit-box-shadow: 0 0 5px #000; 
    -moz-box-shadow: 0 0 5px #000; 
    box-shadow: 0 0 5px #000; 
}

誰能給我一些指點？

編輯：謝謝大家的響應。我的問題現在已修復。：d

來源

2013-07-10 user2567471

在此處發佈代碼 –

添加float: left;到.view規則集：

.view { 
    width: 260px; 
    height: 390px; 
    border: solid #800080; 
    position: relative; 
    text-align: center; 
    box-shadow: 1px 1px 2px #800080; 
    cursor: default; 
    float: left; /* ← add this */ 
}

A fixed jsFiddle

來源

2013-07-10 16:15:04

對不起，還有一個問題。我應該使用什麼代碼來居中這3個圖像？ – user2567471

如果你使用填充選項工作，它不工作？我看不到完整的圖像，甚至是小提琴。 –

我正在考慮使用保證金和自動價值來保持圖像居中相對於瀏覽器的大小，但我不知道如何或在哪裏把代碼。這是jsfiddle鏈接。 HTTP：//的jsfiddle。net/sugarcraving/y9GXs/4/ – user2567471

如果添加此：

.view-sixth { 
    display:inline-block; 
width:33%;  
}

它解決了我的問題：d

來源

2013-07-10 16:10:16 GuiGreg

[該解決方案]（http://jsfiddle.net/roryokane/rX3rB/）在Firefox 22上不適用於我。只有兩個框位於同一行上，而框是與黑色懸停覆蓋圖錯位。 –

this：-moz-box-sizing：border-box; \t -webkit-box-sizing：border-box; \t box-sizing：border-box;應該修復它。 – GuiGreg

或者您可以手動修復witdh，如果它不需要響應。 – GuiGreg

到您的視圖類的規則，添加float:left;

jsFiddle example

來源

2013-07-10 16:11:43 j08691

所有你需要是float: left.view div

看一看 - http://jsfiddle.net/8P7rB/

.view { 
    width: 260px; 
    height: 390px; 
    border: solid purple; 
    position: relative; 
    text-align: center; 
    box-shadow: 1px 1px 2px purple; 
    cursor: default; 
    float: left; 
    margin-right: 10px; 
}

來源

2013-07-10 16:11:45 boz

設置div s表示包含圖像的CSS display財產到inline-block：

如果有足夠的空間

.view { 
    display: inline-block; 
}

jsFiddle

的圖像應保持一致。如果即使沒有足夠的空間，也希望圖像始終對齊，請將其包含在容器中並設置容器的min-width。

來源

2013-07-10 16:15:10

圖像將不排成一行

回答

相關問題