如何對齊選項卡旁邊的圖像

我一直在關注此guide，以便爲我的電子商務網站上的每個產品頁面創建一個選項卡。我需要幫助，以瞭解如何讓此選項卡出現在產品圖片旁邊。此時該選項卡顯示在圖像下方。如何對齊選項卡旁邊的圖像

圖片CSS：

.product_image { 
    float: left; 
    width: 200px; 
    padding: 20px; 
    margin: 0 20px 20px 0; 
}

標籤CSS：

.tabs { 
     position: relative; 
     min-height: 200px; 
     clear: both; 
     margin: 25px 0; 
    } 
    .tab { 
     float: left; 
    } 
    .tab label { 
     background: #eee; 
     padding: 10px; 
     border: 1px solid #ccc; 
     margin-left: -1px; 
     position: relative; 
     left: 1px; 
    } 
    .tab [type=radio] { 
     display: none; 
    } 
    .content { 
     position: absolute; 
     top: 28px; 
     left: 0; 
     background: white; 
     right: 0; 
     bottom: 0; 
     padding: 20px; 
     border: 1px solid #ccc; 
    } 
    [type=radio]:checked ~ label { 
     background: white; 
     border-bottom: 1px solid white; 
     z-index: 2; 
    } 
    [type=radio]:checked ~ label ~ .content { 
     z-index: 1; 
    }

我使用的是一個主題叫做Pronto

這裏的頁面的寬度和在它需要參考的情況下其他細節：

.container { margin: 0 auto; padding: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 
.container-left { position: absolute; left: 40px; top: 40px; width: 200px; } 
.container-right { padding-left: 240px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 
.single .container-right, 
.page .container-right { max-width: 1120px; min-width: 500px; } 
.boxed { background: #d9d9d9; padding: 30px; box-shadow: 0 1px 1px rgba(0,0,0,0.15); } 
/* Body, Main & Commons

任何幫助，非常感謝。

來源

2013-08-22 RedGiant

如果您爲代碼設置了jsfiddle，它將非常有用...並且還解釋了您正在嘗試執行的操作。移動圖片旁邊的標籤並沒有太多解釋。你能發佈你想要完成的截圖嗎？ – robooneus

@robooneus，這裏是當前狀態的[截圖]（http://i1350.photobucket.com/albums/p769/Stonecold_Stone/screenshot2_zpsc7daee6e.png）。我想將標籤移動到圖片旁邊，以免它看起來很空。我正在建立一個jsfiddle。我可以在此發佈我的產品鏈接以便更好地瞭解嗎？ – RedGiant

哦，你的意思是整個機箱，而不是單個標籤？如果你可以發佈一個鏈接到頁面，它會很棒，看起來應該很簡單，但是如果沒有看到HTML，也無法判斷（最好只是看到整個頁面）。此外，這應該是響應或不？ – robooneus

嘗試的插件position:relative;

.product_image { 
    float: left; 
    position:relative; 
    width: 200px; 
    padding: 20px; 
    margin: 0 20px 20px 0; 
}

見它是如何工作了雅

來源

2013-08-22 14:22:35 SaturnsEye

感謝您的回覆。我將它添加到CSS，但不幸的是沒有任何改變。 – RedGiant

要移動的標籤封裝在您的網站被旁邊的圖像使用CSS的.tabs：

.tabs { 
    position: relative; 
    float:left; 
    min-height: 200px; 
    margin: 25px 0; 
    width: 560px; 
}

重要的是加入float:left;並刪除clear:both;。其餘的你可以玩，以使其適合最好的。

來源

2013-08-22 15:46:06 robooneus

將來，請確保您發佈HTML代碼以及CSS（鏈接到網站或jsfiddle總是最好的）。如果不知道HTML的結構，CSS本身並不意味着太多。 – robooneus

非常感謝！我將在未來提供儘可能多的細節。 – RedGiant

@ user35295快樂編碼！如果回答你的問題，請接受答案。 – robooneus

如何對齊選項卡旁邊的圖像

回答

相關問題