가격이 다른 div를 다른 하나 위에 배치하십시오.

저는 기본 Wordpress 테마 인 "Unite"에 wooCommerce 플러그인으로 제공되는 작은 eStore를 보유하고 있습니다.가격이 다른 div를 다른 하나 위에 배치하십시오.

내가 지금 다음과 같습니다 기본 가격 레이아웃 수정하고 싶습니다

enter image description here

CSS는 니펫을 :

<span class="price"> 
    <del> 
     <span class="amount">2,200.00&nbsp;руб.</span> 
    </del> 
    <ins> 
     <span class="amount">1,500.00&nbsp;руб.</span> 
    </ins> 
</span>

내가 한 행에 두 가격을 배치 할 필요가 그리드를 깨지는 않을 것입니다.

enter image description here

가 어떻게 CSS와 의사 요소를 사용하여 한 행의 모든 가격을 배치하는 CSS 규칙을 수정할 수 : 지금의 경우, 시계의 목록이 방법을 렌더링? 고맙습니다!

출처

2015-02-02 paus

'디스플레이 플로트 :/우 가격 라벨을 왼쪽 : 인라인 블록'? –

이 작업을 수행해야하지만 제품 컨테이너의 너비를 초과하지 않도록 글꼴 크기를 변경해야합니다. /* span.price에 가상의 너비가 추가되었지만 당신의 제품은 넓습니까? */

span.price { 
 
    width: 220px; 
 
    display: block; 
 
} 
 
span.price del, 
 
span.price ins { 
 
    float: left; 
 
} 
 
span.price del { 
 
    width: 35%; 
 
    font-size: .7em; 
 
} 
 
span.price ins { 
 
    width: 65%; 
 
    font-size: 1.4em; 
 
}

<span class="price"> 
 
    <del> 
 
     <span class="amount">2,200.00&nbsp;руб.</span> 
 
    </del> 
 
    <ins> 
 
     <span class="amount">1,500.00&nbsp;руб.</span> 
 
    </ins> 
 
</span>

출처

2015-02-02 12:25:55 Aaron

감사합니다. 솔루션이 제 경우에는 일부 에디션과 함께 작동합니다! – paus

당신은 플로트 또는 displat 사용할 수 있습니다 플로트 : 라인 쇼에 걸쳐 ... 할인 레이블 인라인 블록은

출처

2015-02-02 12:28:19

가격이 다른 div를 다른 하나 위에 배치하십시오.

답변

관련 문제