Question

我需要有关骨架@ http://www.slutatnian.se/skolor/nosnas/

的帮助

在网站上有一张图片在代码下方，当我在电脑上时它可以正常工作。但是，如果我使用移动设备，图片将在屏幕下方显示，我希望图片在移动设备上的“Nösnäsgymnasiumet”之后，但我该怎么做？

（不要介意hotpink，我正在使用它看到列）

这是html代码。

<div class ="container">

<div class="nosnastitel">
    <div class="eleven columns offset by one alpha" style="background-color:hotpink">
    <h3>Nösnäsgymnasiumet.</h3>
    </div>
    </div>

    <div class="six columns offset-by-one  " style="background-color:hotpink">
    <div class="infonosnas">


    <h4> Om Nösnäsgymnasiet </h4>


    <h5> Utbildning för dig </h5>
    <p> Nösnäsgymnasiet är en skola med stort utbildningsutbud, många möjligheter, kompetens och engagemang. Vi har som målsättning att du som elev skall känna dig trygg på vår skola och få en utbildning som ger dig en bra start för framtiden. </p>

    <br/>
    <h5> Gemenskap och trivsel </h5>
    <p> Här finns något för alla!
    Vi har ett stort utbud av högskoleförberedande program, yrkesprogram, introduktionsprogram, lärlingsutbildning och gymnasiesärskola.

    Hos oss kan du förbereda dig för högskolestudier eller yrkesliv, utveckla dina estetiska förmågor eller inrikta dig inom bland annat ekonomi, data, teknik och media. </p>
    <br />
    <h5>Många valmöjligheter </h5>
    <p>Nära hav och natur
    Skolan ligger på det vackra västkusten i lummig grönska och med utsikt över Hakefjorden. Ett stenkast bort finns salta bad, naturstigar och friskvårdsanläggning med simhall och idrottsplats. </p>

    <p>I skolans centrala del ligger administrationen och elevbiblioteket som är öppet varje dag. Det finns också ett elevcafé och två skolmatsalar. Med några minuters promenadväg från Stenungsunds centrum har du snabb tillgång till buss och tåg. </p>

    </div>

   </div>
   <div class="four columns offset-by-five omega">
    <div class="nosnasbild">
    <img src="skola2.jpg" alt="nosnasbild" /> </a>
    </div>
    </div>

</div>

Answer 1

通过添加两个相同的图片但使用不同的类来解决它。之后我用了我添加

.nosnasbild img{
     display: none; 
}

CSS中的

。

另一个我用作媒体查询，并使用

.nosnaspic img{
     display: none; 
}

这不是最理想的解决方案，但效果很好。

如何将图片放在我想要的骨架中

1 个答案: