Question

<div class="container">
<div class="info col-xs-12 col-sm-4 col-md-4 page-header">
    <h2>One Piece Manga</h2>
    <p>
        Released: 1997 Author(s): Oda Eiichiro  Artist(s): Oda Eiichiro 
    </p>
</div>
<div class="op">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <img src="img/volume80.png" id="image" class="img-responsive"/>
    </div>
</div>
    <div class="story col-xs-12 col-sm-12 col-md-8">
        <p><strong>Gol D. Roger was known as the Pirate King, the strongest and most infamous being to have sailed
            the Grand Line. The capture and death of Roger by the World Government brought a change throughout
            the world. His last words before his death revealed the location of the greatest treasure in the
            world, One Piece. It was this revelation that brought about the Grand Age of Pirates, men who dreamed
            of finding One Piece (which promises an unlimited amount of riches and fame), and quite possibly the 
            most coveted of titles for the person who found it, the title of the Pirate King.</p>
            <br/>
            <p>Enter Monkey D. Luffy, a 17-year-old boy who defies the standard definition of a pirate. Rather than
            the popular persona of a wicked, hardened, toothless pirate who ransacks villages for fun, Luffy’s
            reason for being a pirate is one of pure wonder; the thought of an exciting adventure and meeting new
            and intriguing people, along with finding One Piece. Following in the footsteps of his childhood hero,
            Luffy and his crew travel across the Grand Line, experiencing crazy adventures, unveiling dark mysteries
            and battling strong enemies, all in order to reach One Piece.   </strong></p>
    </div>
</div>
</div>

CSS： -

.op{
     float: right;
     width: 300px;
     height: 400px;
     margin-top: 100px;
   }

我尝试使其响应，但在小屏幕尺寸下，它看起来并不真实。我无法找出para和image的正确间距。 Demo

Answer 1

你有一个固定的高度和宽度，这是非常糟糕的，因为它总是保持这个大小，无论你的班级需要什么尺寸的屏幕：

neededNodeFunction = str => Object.keys(process.env)
  .sort((a, b) => b.length - a.length) // sort it by length so 'VAR1' gets before 'VAR'
  .reduce((str, key) => {
    return str.replace(new RegExp(`\\$${key}`, 'g'), process.env[key])
  }, str)

固定高度会因工作而停止响应，您也可以尝试宽度和高度为100％

.op {
 float: right; 
 margin-top: 100px;
}

如果您希望图像在小屏幕中对齐，请创建媒体查询并将显示设置为阻止并具有自动左右边距

.op {
 float: right;
 width: 100%;
 height: 100%;
 margin-top: 100px;
}

我希望图像能够正确响应

1 个答案: