Css文本/图像包装不起作用

时间:2015-06-10 13:47:31

标签: html css magento

为什么文本换行不能解决这些图像?我在magento文本编辑器中工作,为什么我不使用css样式表,而是将其写入代码。

版本不正常: https://jsfiddle.net/mastervision/s8grhjab/

我使用了TextWrap enter image description here

我在很多其他情况下为我工作过: https://jsfiddle.net/mastervision/s6o64m06/

<!DOCTYPE html>
        <html>
        <head>
        <style> 
        .newspaper {
            /* Chrome, Safari, Opera */
            -webkit-column-count: 2;
            -webkit-column-gap: 40px;
            -webkit-column-rule-style: outset;
            -webkit-column-rule-width: 1px;



            /* Firefox */
            -moz-column-count: 2;
            -moz-column-gap: 40px;
            -moz-column-rule-style: outset;
            -moz-column-rule-width: 1px;

            column-count: 2;
            column-gap: 40px;
            column-rule-style: outset;
            column-rule-width: 1px;
        }

        .TextWrap {
        float: right;
        margin:10px;}

        @media only screen and (max-width: 40em) {
            .newspaper{
                /* Chrome, Safari, Opera */ 
                -webkit-column-count :  1 ; 
                -webkit-column-gap :  0px ; 
                -webkit-column-rule-style : outset ; 
                -webkit-column-rule-width :  1px ;

                /* Firefox */ 
                -moz-column-count :  1 ; 
                -moz-column-gap :  0px ; 
                -moz-column-rule-style : outset ; 
                -moz-column-rule-width :  1px ;

                column-count :  1 ; 
                column-gap :  0px ; 
                column-rule-style : outset ; 
                column-rule-width :  1px ; 
            } 

        .TextWrap {
        float: right;
        margin:10px;}



        </style>
        </head>
        <body>


        <div class="newspaper">
        <p><span style="font-size: x-large;">Gentleman Basis-Ausstattung</span><br />

    ="font-size: medium;">LINK ADVANCED TIPPS.</span></span></p>

        </body>
        </html>

enter image description here

1 个答案:

答案 0 :(得分:1)

它失败了,因为您在代码中的任何位置使用类.TextWrap。将该类添加到包含图像的段落中,它将完成:

<p class="TextWrap">
    <img title="Schwarzer cap-toe Oxford" src="{{media url="wysiwyg/OHNE.TEXT_Landingpage_1200pix_08.jpg"}}" alt="Schwarzer cap-toe Oxford" width="300" height="155" />
</p>

您可以在以下任何链接中看到它:

(请注意,图片需要在他们自己的段落上才能使用,这就是为什么我在第一张图片周围稍微更改了代码的原因)