0
我正在使用媒體查詢@ 480,但是,無法讓文字停止環繞圖像。溢出:隱藏/自動工作,但是這會影響圖像中的文本/標題,即切斷一些文本。停止使用溢出的文字環繞圖像的另一種方法:隱藏
誰能幫助/提醒重:
前端
<div class="outer">
<figure class="img1 embed news">
<img src="Images/windscreen.jpg" alt="Windscreen">
<figcaption>A fifth of people use a bank card to scrape their car's windscreen.</figcaption>
</figure>
</div>
<p>Many people in the UK rely on bank cards to allow them to take out money from their bank account. However, it seems a large number of people are abusing their card, which means that they risk damaging them, as well as misplacing them.</p>
CSS
.outer {
display: block;
text-align: left;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
figure.embed,
figure.embed-top,
figure.overlay,
figure.embed-over {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0em;
font-size: 0.8em;
background: white;
width: 100%;
}
figure.embed img,
figure.embed-top img,
figure.overlay img,
figure.embed-over img {
margin-left: auto;
margin-right: auto;
}
figure.embed figcaption,
figure.embed-top figcaption,
figure.overlay figcaption,
figure.embed-over figcaption {
width: 100%;
padding: 0.5em;
/* neutral theme */
color: rgba(50,50,50,1.0);
background: rgba(200,200,200,0.825);
}
在此先感謝:達到這一基於下面的代碼另一種方式!