탭 옆에 이미지 정렬하기

나는 이것을 전자 거래 사이트의 모든 제품 페이지에 대한 탭을 만들기 위해 guide에 따라 왔습니다. 이 탭을 제품 이미지 옆에 표시하는 방법에 대한 도움이 필요합니다. 지금 탭이 이미지 아래에 표시됩니다.탭 옆에 이미지 정렬하기

이미지 CSS :

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

탭 CSS : 나는 테마가 여기에

Pronto 페이지의 폭과는 참조 용으로 필요한 경우 기타 세부 사항이다라고 사용하고

.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; 
    }

.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

가 .tabs이 CSS 사용하는 이미지 옆으로 사이트의 탭 인클로저를 이동하는 방법을 참조하십시오 :

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

을

여기서 중요한 것은 float:left;을 추가하고 clear:both;을 제거하는 것입니다. 나머지는 가장 잘 맞도록하기 위해 함께 할 수 있습니다.

출처

2013-08-22 15:46:06 robooneus

앞으로는 CSS뿐만 아니라 HTML 코드도 게시해야합니다 (사이트 또는 jsfiddle 링크가 항상 최상입니다). CSS 자체만으로는 HTML의 구조를 모른 채 너무 많은 것을 의미하지는 않습니다. – robooneus

대단히 감사합니다 !! 나는 가능한 한 많은 세부 사항을 앞으로 제공 할 것입니다. – RedGiant

@ user35295 해피 코딩! 그리고 귀하의 질문에 대답하면 답변을 수락하십시오. – robooneus

탭 옆에 이미지 정렬하기

답변

관련 문제