0
画像の下に2つの異なる段落がある画像が1つあります。正しい場所に保管してください。画像がどのように見えるかSee jsfiddle here to get a clearer idea。「トップ」CSS属性を使用してテキストに画像が挿入されないようにする
私がコードを実装した方法に直面している問題は、画面が小さくなると、左のテキストが画像を押し上げるということです。誰も私がこれを防ぐ方法を知っていますか？
jsfiddleで画面を小さくすると、左側のテキストが画像に表示されます。それがために、次の行である：
.left {
position: relative;
top: -100px;
}
多分それは私が異なる画面サイズのメディアクエリを記述維持する必要がある場合がありますか？うまくいけばそれだけではないが、これは私が考えることができる唯一の解決策である。
下記の完全なコードを参照してください。
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*='col-'] {
float: left;
}
.col-1-2 {
width: 50%;
}
.grid:after {
content: "";
display: table;
clear: both;
}
[class*='col-'] {
padding-right: 20px;
}
[class*='col-']:last-of-type {
padding-right: 0;
}
.left {
position: relative;
top: -100px;
}
img {
width: calc(100% - 1.2em);
display: block;
}
.img-wrap {
display: inline-block;
position: relative;
width: 100%;
}<div class="img-wrap">
<img class="section-img" src="http://i.stack.imgur.com/LcAqZ.jpg">
</div>
<div class="bottom-section">
<div class="grid">
<div class="left col-1-2">
<h3>Test</h3>
<p>Test test</p>
</div>
<div class="col-1-2">
<h3>Test</h3>
<p>Test</p>
</div>
</div>
これは正常な動作が期待されています...あなたはいつもそれが通常より100pxに高いように.left' 'でそのテキストを明示的に語っています。これは、スクリーンが特定のサイズである場合にのみ良好に見えます。あなたはどのように見えますか？ – Joseph
@Joseph私はそれが画面のサイズが小さくなるにつれて画像の「左手側」の下の一定点にとどまりたい –